Home > Developer > JavaScript
The size of the CSS background image does not change with the browser scaling. the css background image
<! -- Author: blog garden dee -->
The size of the background image on the homepage of some websites does not change with the browser scaling. For example, the size of the background image on the homepage of Baidu Personal Edition does not change after scaling:
For example, huaban.com ):
Now we use CSS to achieve this effect.
First you need a large enough size image, Baidu background image size is 1600 * 1000px (image 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 );
There are two ways to achieve the effect of background image not scaling:
Method 1. Use the image as the background
There are several CSS attributes to mention: background-size: cover. This CSS3 attribute is used to extend the background image to a large enough size to completely overwrite the background image, some parts of the background image may not be displayed in the background positioning area. If this attribute is not used, the background image will be reduced by scaling the browser in IE11 and FireFox, use-webkit-background-size: cover and-o-background-size: cover to be compatible with webkit kernel browsers and operabrowsers; the background-attachment attribute sets whether the background image is fixed or scrolled with the rest of the page. When it is set to fixed, the background image does not move.
Code (using the star space map of Baidu, the effect is the same as that of Baidu ):
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;/* compatible with Webkit kernel browsers such as Chrome and Safari */15-o-background-size: cover; /* compatible with Opera */16 zoom: 1; 17}
Method 2. the label is used instead of the image as the background. The effect is that the image size does not change as the browser scales. However, if a vertical scroll bar exists, the image is not fixed and will move with the scroll bar. You only need to set the image width to 100%.
The code is very simple. There are only a few lines. It uses Baidu's space map:
HTML:
<div id="con"></div>
CSS:
1 body{ margin:0; padding:0;}2 #pic{ width:100%;}
The first time I saw some people ask questions about css, most of them are in Chinese. I haven't figured out what you want to ask.
If you want to keep the background image in the background center, the style is as follows:
Background: url (image path) center no-repeat;
But if you want to make the image size zoom in or out with the browser size, it will be very difficult. I will give you a simple solution.
1. If the landlord only displays the image as an image, you can use css control, such as img {width: 100%; height: 100% ;}.
Otherwise, you can try the following method:
2. If this image is a background image and the background image is not scalable, you can use other methods to solve it. in ie, you can use <body
Style = "filter: progid: dximagetransform.microsoft.alphaimageloader(src%'1.jpg ', sizingmethod = 'Scale')"> to stretch the entire browser, but not other browsers.
At this time, you can turn around and set two-layer div. The bottom-layer div is used as the background and you can place an image.
<Div id = "background" style = "position: absolute; z-index:-1; width: 100%; height: 100%; top: 0px; left: 0px; "> </div>
Then place the webpage content on the second layer <div id = "content"> page content </content>
3. By default, webpage background images are repeatedly tiled over the entire page. The above two methods require that the images are not repeated, but must be full of the methods used by the browser.
Q: Can CSS achieve background image stretching? (That is, after the browser is zoomed in or out, a complete, non-repeating image is displayed)
Hello:
You can use javascript to dynamically change images;
Hope to help you;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
