Two methods to stretch the background image of a web page

Two methods to stretch the background image of a web page
There are two solutions:

One is CSS, using background-size:cover to achieve the stretching effect of the image, but IE8 and below do not support background-size, so you can use Microsoft's filter effect, but IE6 does not support it.

Copy code
The code is as follows:

body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}

Another way is to use jQuery, dynamically insert a div in the body, and then include a picture in the div. When the browser window changes size, dynamically set the size of the background picture.
Copy code

Copy code
The code is as follows:

$(function(){
$("body").append("<div id='main_bg' style="position:absolute;"/>");
$("#main_bg").append("<img src='bg.jpg' id='bigpic'>");
cover();
$(window).resize(function(){ //Browser window changes
cover();
});
});
function cover(){
var win_width = $(window).width();
var win_height = $(window).height();
$("#bigpic").attr({width:win_width,height:win_height});
}

<<:  How to expand the disk space of Linux server

>>:  MySQL Interview Questions: How to Set Up Hash Indexes

Recommend

MySQL example to explain single-row functions and character math date process control

Table of contents 1. Character Function 1. Case c...

CSS uses position + margin to achieve the method of horizontal and vertical centering of fixed boxes

margin:auto; + position: absolute; up, down, left...

Example of how to enable Slow query in MySQL

Preface Slow query log is a very important functi...

Why should you be careful with Nginx's add_header directive?

Preface As we all know, the nginx configuration f...

JS array loop method and efficiency analysis comparison

Array Methods JavaScript has provided many array ...

How to implement remote connection for Redis under Linux

After installing Redis on Linux, use Java to conn...

MySQL 5.5 installation and configuration graphic tutorial

Organize the MySQL 5.5 installation and configura...

Introduction to fourteen cases of SQL database

Data Sheet /* Navicat SQLite Data Transfer Source...

MySQL Tutorial: Subquery Example Detailed Explanation

Table of contents 1. What is a subquery? 2. Where...

How to set process.env.NODE_ENV production environment mode

Before I start, let me emphasize that process.env...

Detailed explanation of the solution to permission denied in Linux

Permission denied: The reason for this is: there ...

Detailed Introduction to MySQL Innodb Index Mechanism

1. What is an index? An index is a data structure...

Let’s take a look at JavaScript precompilation (summary)

JS running trilogy js running code is divided int...

CSS Summary Notes: Examples of Transformations, Transitions, and Animations

1. Transition Transition property usage: transiti...

Detailed explanation of MySQL master-slave replication and read-write separation

Table of contents Preface 1. Overview 2. Read-wri...