CSS for responsive full-screen background image

Source: Internet
Author: User
Tags relative


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 center */
Background-position:center Center;

/* Background Map Uneven */
background-repeat:no-repeat;

/* When the content height is greater than the height of the image, the position of the background image is fixed with viewport */
background-attachment:fixed;

/* Make the background map based on the container size scaling */
background-size:cover;

/* Background color is set, background color is displayed during background image loading *
/background-color: #**46;
}

The most important of the above is:


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.



Original address: http://www.html-js.com/article/2569

Original Author: Button



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.