CSS Full Screen background image

Spit Groove: Yeah Tomorrow is the National day! Haha, in advance bless you all Park Friends National Day happy, holiday happy, life happy, happy every day! National day I want to go home a trip, put some unused things to take home, visit friends and family, a few days at home soy sauce ~ ~ ~

To get to the point, let's go back to our theme to see the full screen background of CSS. nowdays, full screen large map of the page became a kind of fashion, Web templates, Layout is CSS, HTML ... To design, here is the CSS to talk about the full spelling of the background map.

Simple point, for the full screen background, we just need to use a CSS background-size property on it.

Whenthe value of background-size is cover, the browser automatically scales the width and height of the background graph until it is greater than or equal to viewport width and height.

Body {/* Load background map */background-image:url (http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg )////background graph vertical, horizontal center */background-position:center center;/* background plot */background-repeat:no-repeat;/* when the content height is greater than the height of the picture, The position of the background image is relative to the viewport fixed */background-attachment:fixed;/* lets the background map set the background color based on the container size scaling */background-size:cover;/* Background color is displayed during the loading of the */background-color: #FF0000;}

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 particularly large), 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.

Another problem is to view on other media devices, viewing on different screens is not the same, so we want to set max-width:600px as a breakpoint, that is, when the browser viewport greater than 600px, will use a large background map, conversely, the use of small background map. Here is the media Query method:

@media only screen and (max-width:600px) {  body {    Background-image:url (http://images.cnblogs.com/cnblogs_com /caidupingblogs/828701/o_5_11911_8.jpg);}}

CSS Full Screen background image