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
VM VirtualBox virtual machine mount shared folder
One environment Install VMware Tools on CentOS 7 ...
mysql5.5.28 installation tutorial is super detailed!
mysql5.5.28 installation tutorial for your refere...
How to use the name attribute and id attribute of the a tag to jump within the page
In the past, I only knew how to use the name attri...
CSS3 simple cutting carousel picture implementation code
Implementation ideas First, create a parent conta...
Detailed explanation of asynchronous generators and asynchronous iterations in Node.js
Preface Generator functions have been in JavaScri...
What is JavaScript anti-shake and throttling
Table of contents 1. Function debounce 1. What is...
Steps to build a file server using Apache under Linux
1. About the file server In a project, if you wan...
Implement a simple search engine based on MySQL
Table of contents Implementing a search engine ba...
How to install setup.py program in linux
First execute the command: [root@mini61 setuptool...
Detailed explanation of Nginx timed log cutting
Preface By default, Nginx logs are written to a f...
CSS implements a pop-up window effect with a mask layer that can be closed
Pop-up windows are often used in actual developme...
Solve the problem that line-height=height element height but text is not vertically centered
Let me first explain why the text is not vertical...
Detailed explanation of the lock structure in MySQL
Mysql supports 3 types of lock structures Table-l...
Detailed explanation of why v-if and v-for in Vue are not recommended to be used together
This article mainly introduces why v-if and v-for...
Tutorial on how to quickly deploy a Nebula Graph cluster using Docker swarm
1. Introduction This article describes how to use...