CSS realizes that the background image size does not change with browser scaling_html/css_WEB-ITnose

<!-- Author:博客园小dee -->

The size of the background image on the homepage of some websites does not change as the browser zooms. For example, on the homepage of Baidu Personal Edition, the size of the background image does not change after scaling:

Another example is Huaban.com:

Now use CSS to achieve this effect.

First of all, you need a picture of large enough size. The size of the Baidu background image above is 1600*1000px (picture address: http://4.su.bdimg.com/skin/12.jpg?2 ); The size of the petal background image is 1600*1600px (image address: http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg);

Then there are two ways to achieve the background The effect of the image not scaling:

Method 1. Use the image as background

There are several CSS properties to mention: background-size: cover. The function of this CSS3 property is to change the background image Expand to be 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, the background image will shrink when the browser is zoomed in IE11 and FireFox. , use both -webkit-background-size: cover and -o-background-size: cover to be compatible with webkit kernel browser and Opera browser; the background-attachment attribute sets whether the background image is fixed or scrolls with the rest of the page, when set When fixed, the background image does not move when the rest of the page is scrolled.

Code (using Baidu’s starry sky map, the effect is the same as the Baidu screenshot above):

HTML:

<div 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"); 10     background-position: center 0;11     background-repeat: no-repeat;12     background-attachment:fixed;13     background-size: cover;14     -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */15     -o-background-size: cover;/* 兼容Opera */16     zoom: 1;    17 }

Method 2. Instead of using the image as the background, use the tag. The effect is that the image size will not change Changes as the browser zooms, but if there is a vertical scroll bar, the image will not be fixed but will move with the scroll bar. Just set the width of the image to 100%.

The code is very simple, only a few lines, using Baidu’s starry sky map:

HTML:

<div id="con"><img  src="/static/imghwm/default1.png"  data-src="maskimg/star.jpg"  class="lazy"  id="pic" alt="CSS realizes that the background image size does not change with browser scaling_html/css_WEB-ITnose" ></div>

CSS:

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