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});
}

MySQL password contains special characters & operation of logging in from command line

Blog

Two methods to stretch the background image of a web page

Detailed examples of Docker-compose networks

Notes on the MySQL database backup process

Summary of webpack's mobile adaptation solution

Detailed example of deploying Nginx+Apache dynamic and static separation

MySQL series multi-table join query 92 and 99 syntax examples detailed tutorial

MySQL password contains special characters & operation of logging in from command line

Two ways to visualize ClickHouse data using Apache Superset

Complete steps to configure IP address in Ubuntu 18.04 LTS

Detailed summary of mysql sql statements to create tables

A brief discussion on the binary family of JS

Recommend

The whole process of configuring hive metadata to MySQL

Tutorial on how to quickly deploy a Nebula Graph cluster using Docker swarm

MySQL 5.7 installation MySQL service cannot be started but the service does not report any errors

Linux method example to view all information of the process

Element's el-tree multiple-select tree (checkbox) parent-child node association is not associated

Detailed explanation of the differences between SQL joint query inner join, outer join and cross join

Why is it not recommended to use an empty string as a className in Vue?

Complete steps for vue dynamic binding icons

Full-screen drag upload component based on Vue3

Implementation of mounting NFS shared directory in Docker container

Vue uses GraphVis to develop an infinitely expanded relationship graph

JavaScript offsetParent case study

Detailed explanation of views in MySQL

How to clear default styles and set common styles in CSS

Detailed code for building a multi-person video chat service based on webrtc on Ubuntu