CSS implementation of the background map size does not vary with the browser zoom two ways

method One. Take the picture as a background

There are several properties of CSS to mention: Background-size:cover, this CSS3 property is to extend the background image to large enough so that the background image completely covers the background area, some parts of the background image may not be displayed in the background positioning area, if not use this property, Zoom the browser in IE11 and Firefox, and the background image will be scaled down with the-webkit-background-size:cover and-o-background-size:cover compatible WebKit kernel browser and Opera browser The Background-attachment property sets whether the background image is fixed or scrolls along with the rest of the page, and the background image does not move when the rest of the page is scrolled when set to fixed.

Code (with Baidu's star chart, the effect and the above Baidu's one to):


Html:

The code is as follows:
<div id= "Con" ></div>

Css:

The code is as follows:
body{margin:0; padding:0;}
#con {
Position:absolute;
top:0;
left:0;
height:100%;
width:100%;
Background-image:url ("maskimg/star.jpg");
Background-position:center 0;
Background-repeat:no-repeat;
background-attachment:fixed;
Background-size:cover;
-webkit-background-size:cover;/* compatible WebKit kernel browser such as chrome and Safari */
-o-background-size:cover;/* Compatible Opera */
Zoom:1;
}

method Two. Instead of using the image as a background, use the tag , and the effect is that the image size does not change with the browser's zoom, but if there is a vertical scrollbar, the picture is not fixed and moves with the scroll bar. Just set the width of the picture to 100%.

The code is very simple, only a few lines, with or Baidu's star chart:


Html:

The code is as follows:
<div id= "Con" ></div> _fcksavedurl= "" Maskimg/star.jpg "> </div> "

Css:

The code is as follows:
body{margin:0; padding:0;} #pic {width:100%;}

CSS implementation of the background map size does not vary with the browser zoom two ways