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
Causes and solutions to the garbled character set problem in MySQL database
Preface Sometimes when we view database data, we ...
Why can't my tomcat start?
Table of contents Phenomenon: Port usage: Spellin...
MySQL master-slave replication principle and points to note
Written in front I have been writing a special to...
Differences between proxy_pass in two modules in nginx
1. The proxy_pass directive of the 1.ngx_stream_p...
How to quickly deploy Redis as a Docker container
Table of contents getting Started Data storage Co...
Summary of discussion on nginx cookie validity period
Every visit will generate Cookie in the browser, ...
Detailed explanation of the steps to create a web server with node.js
Preface It is very simple to create a server in n...
Solution to the problem that the mysql8.0.11 client cannot log in
This article shares with you the solution to the ...
JS implements the sample code of decimal conversion to hexadecimal
Preface When we write code, we occasionally encou...
Explanation of the usage scenarios of sql and various nosql databases
SQL is the main trunk. Why do I understand it thi...
Detailed steps for installing MySQL using cluster rpm
Install MySQL database a) Download the MySQL sour...
Fall in love with the simple CSS details, although insignificant, can improve efficiency
The future of CSS is so exciting: on the one hand,...
The advantages and disadvantages of nginx and lvs and their suitable usage environment
At the very beginning, let's talk about what ...
A brief discussion on the performance issues of MySQL paging limit
MySQL paging queries are usually implemented thro...
Detailed tutorial on installation and configuration of MySql 5.7.17 winx64
1. Download the software 1. Go to the MySQL offic...