A very popular form of Web page is full screen large map, this article will be the simplest way to achieve this effect. CSS attribute background-size is used, without JavaScript.
Core Concepts
Use the Background-size property 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.
Practice
Html
<!doctype html>We will assign a background map to the body tag, so that the background map will fill 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.
The style of the CSS body tag is as follows:
Body {/* * Load Background map */background-image:url (images/background-photo.jpg);/* Background map vertical, horizontal is centered */background-position:center center;/* background Map */background-repeat:no-repeat;/* When the content height is greater than the height of the picture, the position of the background image is fixed relative to the viewport */background-attachment:fixed ;/* Let the background map set the background color based on the container size scaling */background-size:cover;/*, the background color is displayed during the background image loading */background-color: #**46;}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, the body tag).
One thing to note here is that if the background image is smaller than the size of the body 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:
background-attachment:fixed;
(optional) Use media queries to respond to small screens
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 screen and (max-width:767px) { body { Background-image:url (images/ background-photo-mobile-devices.jpg);} }The media query above sets MAX-WIDTH:767PX as a breakpoint, that is, when the browser viewport is larger than 767px, a large background image is used, and a small background image 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.
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
