Two ways to use CSS to achieve the background map size does not vary with the browser zoom code

This article mainly introduces the two methods with CSS to achieve the background map size does not change with the browser zoom code, has a certain reference value, and now share to everyone, the need for friends can refer to

Some sites on the home page background map size does not vary with the browser zoom, this example uses CSS to achieve the background map size does not vary with the browser zoom, method one. Use the IMG tag for the image as background and method two. Like a friend can see

Some sites on the home page background map size does not vary with the browser zoom, such as Baidu Personal version of the home page, after zooming the size of the background map does not change:

Another example is the petal net (huaban.com):

Now use CSS to achieve this effect.
First need a large enough size picture, Baidu background map size of 1600*1000px (image address: http://4.su.bdimg.com/skin/12.jpg?2); the size of the petals background map is 1600*1600px (image address: http:/ /hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg);
Then there are two ways to achieve the effect that the background graph does not scale:
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:

<p id= "Con" ></p>

Css:

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 with 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:

<p id= "Con" ></p> _fcksavedurl= "" Maskimg/star.jpg "></p > "

Css:

body{margin:0; padding:0;} #pic {width:100%;}

above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!