Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS to achieve a responsive full-screen background image. I hope you will gain something after reading this article. Let's discuss it together.

Use the background-size property to populate the entire viewport.

When the css property background-size is cover, the browser automatically scales the width and height of the background image until it is greater than or equal to the width and height of viewport.

Use media queries to provide a smaller background image for mobile devices

Why provide small background images for mobile devices? In demo, the actual size of the background image we see is 5498px * 3615px. The purpose of using such a large image is to satisfy most widescreen displays without blurring, at the expense of the image volume of 1.7MB.

However, it is not necessary to use such large pictures on mobile devices, and large images can cause slow loading, especially on mobile networks.

It should be noted that providing a small background map for mobile devices is optional for this technical solution.

Practice

HTML

... Your content goes here...

Later we will assign a background image to the body tag so that the background image can fill the entire browser viewport.

In fact, this scheme works for all block-level containers. If the width and height of your block-level container is dynamic, the background image will automatically scale to fill the entire container.

The style of the CSS body tag is as follows:

Body {

/ * load background image * /

Background-image: url (images/background-photo.jpg)

/ * the background image is centered vertically and horizontally * /

Background-position: center center

/ * the background image is not tiled * /

Background-repeat: no-repeat

/ * when the content height is greater than the picture height, the position of the background image is fixed relative to the viewport * /

Background-attachment: fixed

/ * make the background image scale based on the container size * /

Background-size: cover

/ * set the background color, which will be displayed during the loading of the background image * /

Background-color: # 464646

}

The most important one above is:

Background-size: cover

In this way, the browser scales the background image proportionally until the width and height of the background image is not less than the width and height of the container (in the above example, the body tag).

One thing to note here is that if the background image is smaller than the size of the body tag (for example, on a high-resolution display, or when the page content is particularly large), the browser will stretch the image. We all know that when a picture is stretched, the picture becomes blurred.

Therefore, when selecting the background image, you should pay special attention to the size. In order to accommodate the large screen size, the picture size used in demo is 5498px * 3615px.

At the same time, to keep the background image always centered relative to the viewport, we declared:

Background-position: center center

The above rule positions the origin of the zoom of the background image to the center of the viewport.

The next problem we need to solve is that when the height of the content is greater than the height of the viewport, a scroll bar appears. We want the background image to be always fixed relative to the viewport, even when the user scrolls.

The solution is:

Background-attachment: fixed

(optional) use media queries to deal with small screens

To cope with the small screen, I use photoshop to scale the background image to 768px * 505px, and then compress the image volume through smush.it. This reduces the image volume from 1741KB to 114KB, saving 93%.

The following is how the media query is written:

@ media only screen and (max-width: 767px) {

Body {

Background-image: url (images/background-photo-mobile-devices.jpg)

}

}

The above media query sets max-width: 767px as the breakpoint, which means that when the browser viewport is greater than 767px, a large background image is used, and vice versa.

The downside of using the above media query is that if you shrink the browser window from 1200px to 640px (and vice versa), you will see a brief flicker because a small background image or a large background image is being loaded.

After reading this article, I believe you have a certain understanding of "how to use CSS to achieve a responsive full-screen background picture". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.