CSS implementation background Map size does not change with browser zoom

Source: Internet
Author: User

<!-- -

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.