CSS for responsive full-screen backgrounds

Fills the entire viewport with Background-size:cover in CSS

Attention:

A background image of the 5000px*5000px in the PC-side scaling is basically meet the requirements will not appear fuzzy distortion;

But using such a large picture on the mobile side is a waste of resources, and a large map can slow loading, especially under the mobile network.

A relatively small picture can be set on the mobile side using media queries

body{/*loading the background map*/background-image:url (images/background-photo.jpg);/*The background chart is centered vertically and horizontally*/background-Position:center Center;/*uneven layout of the background*/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 viewport*/background-attachment:fixed;/*let the background map scale based on container size*/background-Size:cover;/*sets the background color, which is displayed during the background image loading*/background-color: #464646;} 

@media only screen and (max-width:767px) {  body {    background-image:url (images/ Background-photo-mobile-devices.jpg);   }}

　　

CSS for responsive full-screen backgrounds