Home > Developer > Web Develop
A very popular form of Web page is full screen large map, this article will be the simplest way to achieve this effect. CSS Properties background-size are used, without JavaScript.
First look at the demo, open, adjust the browser window size, observe the changes in the background map.
If you need this effect in your project, you're in the right place.
Core ConceptsUse background-size attributes to populate the entire viewport
When the CSS property background-size value is cover , the browser automatically scales the width and height of the background graph until it is greater than or equal to the width and height of the viewport
Use media queries to provide a smaller-sized background image for mobile devices
Why provide a small size background map for mobile devices? In the demo, we see the actual size of the background map is 5498px * 3615px, the purpose of using such a large size picture is to meet the vast majority of widescreen display, and will not show Blur, and the price is 1.7MB of picture volume.
However, it is not necessary to use such a large image on mobile devices, and large graphs can also cause slow loading, especially under the mobile network.
It is important to note that providing a small background map for mobile devices is optional for this technical solution.
Html
<!doctype html>><body> ...Your content goes here...</body></html>
We will body assign a background map to the tag so that the background can be filled with the entire browser viewport.
In fact, this scheme can be effective for all block-level containers. If the width of your block-level container is dynamic, the background map will automatically scale and fill the container.
bodyThe CSS tags are styled as follows:
Body{/* Load Background map */background-image:Url(Images/background-photo. jpg);/* Background graph vertical, horizontal center */background-position: Center Center; /* Background map uneven spread */background-repeat: no-repeat; /* When the content height is greater than the height of the image, the position of the background image is fixed */background-attachment: Viewport /* Let the background map be based on container size scaling */background-size: Cover; /* Set the background color, the background color will be displayed during the loading of the background */background-color: #464646;} The most important of the above is:
background-size: cover;
This allows the browser to scale the background map proportionally until the background is wider than the width of the container (in the example above, it is the body label).
One thing to note here is that if the background map is smaller than body the size of the label (for example, on a high-resolution monitor, or when the page content is special), the browser stretches the picture. As we all know, when a picture is stretched, the picture becomes blurred.
Therefore, when choosing a background map, pay special attention to dimensions. In order to take care of the large screen, the demo uses a picture size of 5498px * 3615px.
Also, in order for the background graph to always be centered relative to viewport, we declare:
background-position: center center;
The above rule will position the origin of the background map Zoom to the center of the viewport.
The next thing we need to solve is that when the height of the content is greater than the height of the viewport, the scroll bar appears. We want the background map to always be fixed relative to viewport, even when the user scrolls.
The solution is:
(optional) Use media queries to respond to small screensbackground-attachment: fixed;
To cope with the small screen, I used Photoshop to scale the background graph proportionally to 768px * 505px, and then compress the picture volume by smush.it. This reduces the volume of the picture from 1741KB to 114KB, saving 93%.
Here's how the media query is written:
@media only screens and (Max-width) {body {background-imageurl (Images/background- Photo-mobile-devices . Jpg}} /span>
The media query above will be max-width: 767px set as a breakpoint, that is, when the browser viewport is larger than 767px, a large background map is used, and a small background map is used instead.
The downside to using the media query above is that if you zoom out of the browser window from 1200px to 640px (and vice versa), you'll see a momentary flicker, because a small background or large background is loading.
The translation ends here. Original Address http://sixrevisions.com/css/responsive-background-image/
PS: Since IE8 and its previous browsers do not support background-size:cover (see compatibility), it is necessary to do more to support these antiques.
To get IE8 support background-size , you can use Background-size-polyfill
Reprint front-end Stew (http://www.html-js.com/article/2569)
CSS for responsive full-screen background image
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
