CSS implementation background Map size does not change with browser zoom

<!-- -

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 you do not use this attribute to zoom the browser in IE11 and Firefox, the background image will be scaled down with the use of-webkit-background-size:cover and-o-background-size: Cover compatible WebKit kernel browser and opera browser; 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 set to fixed.

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

Html:

<id= "Con"></div>

Css:

1 Body{margin:0;padding:0;}2 #con{3 4 position:Absolute;5 Top:0;6  Left:0;7 Height:100%;8 width:100%;9 Background-image:URL ("maskimg/star.jpg");Ten background-position:Center 0; One background-repeat:no-repeat; A background-attachment:fixed; - background-size:cover; - -webkit-background-size:cover;/*compatible with WebKit kernel browsers such as Chrome and Safari*/ the -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:

<id= "Con"><id= "pic"  src = "Maskimg/star.jpg" ></ Div >

Css:

1 Body { margin:0; padding:0;} 2 #pic { width:100%;}

CSS implementation background Map size does not change with browser zoom