How to make the background image occupy the entire screen? _html/css_WEB-ITnose

(I answered this question on Zhihu today and directly transferred my answer...)

I have been paying attention to this question (actually because I am a beginner at all) .....

There are several methods to understand now:

①CSS processing method (IE only)

#backGroundImg {  background-image: url("X.png");  background-repeat: no-repeat;  filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上这个，详细可Google*/}

②Make the background image large enough;
Generally, the image we design for me is the limit of 1440*900, and then it will be displayed in the center It adapts to most screens. But now the monitors are getting bigger and bigger, and the ultra-high resolution of the Retina screen on Mac... When the resolution exceeds the size of the background image, the edges will become the background color.
So the most intuitive method is to double, double, and then double the size of the background image... as long as it exceeds the maximum resolution of mainstream browsers.
However, the disadvantage is obvious, if it is too large. Images will greatly affect the loading speed of web pages.

③Use Js/jQuery to control the size (this is actually a false background adaptation)
Use an tag to change the z- Set the index lower, then use Js/jQuery to monitor the window size, and then change the length and width of the image (Google for details)
However, this method will cause the image to be stretched or compressed too much. It would be very scary...
Moreover, it would be very painful if the right-click function is blocked;

④Use the element to adapt. This is actually similar to ③. If it is the background of the entire web page, add immediately after the initial and then set the CSS to
width:100%;
height:100%;
In this way, the image will automatically scale as the browser zooms in and out. The disadvantages are similar to ③.