What are the ways to make the background picture occupy the whole screen in web development
Today, I will talk to you about the ways to make background pictures occupy the entire screen in web development. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.
I have been paying attention to this problem (in fact, it is because I am a beginner at all.
There are several ways to learn now:
① CSS processing method (IE only)
The code is as follows:
# backGroundImg {
Background-image: url ("X.png")
Background-repeat: no-repeat
Filter:progid:dximagetransform.microsoft.alphaimageloader (src='X.png', sizingmethod='scale'); / * add this, you can Google*/ for details
}
② makes the background picture big enough.
In general, the picture we designed for me is the limit of 1440mm 900, and then the center display will adapt to most of the screen. But now the monitor is getting bigger and bigger, coupled with the abuse of the ultra-high resolution of the Retina screen under Mac. When the resolution exceeds the size of the background image, the edge becomes the background color.
So the most intuitive way is to double the size of the background image, double it, and then double it. As long as it exceeds the maximum resolution of mainstream browsers.
However, the disadvantage is obvious, too large pictures will greatly affect the loading speed of the web page.
③ uses Js/jQuery to control the size (this is actually an illusion of background adaptation)
Use to join a
Tab, set the z-index lower, then use Js/jQuery to monitor the window size, and then change the length and width of the picture. (detailed Google)
However, this method can be very scary when the picture is stretched or compressed too seriously.
Moreover, if you block the right-click function, it will hurt; if you do not block the right-click function, you will be timid.
④ utilization
Element adaptation.
This is actually similar to ③. If it is the background of the entire page, add it immediately after the start.
Then set the CSS
Width:100%
Height:100%
In this way, the image will automatically zoom as the browser zooms in and out. The disadvantages are similar to those of ③.
After reading the above, do you have any further understanding of the ways to make background images occupy the entire screen in web development? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.
