Using fullscreen backgrounds
For websites where we're emphasizing imagery, using a single image as a fullscreen background image is a great way to create a visual punch. However, there are a few challenges we have to overcome, which are as follows:
We need to fill the entire background of the page, no matter what screen size or device our site visitor uses, without gaps or repetition
We need to minimize the file size of the images to increase speed and performance
We need to maintain the proportions of the image without distorting it, while still scaling it to best fit the current window size
We need the image to appear at an acceptable quality level, without visible degradation
CSS3 has introduced the
background-size property, which we can use to proportionally scale an image to the window size. This works pretty well in the browsers that have support for this new property (check http://caniuse.com/#search=background-size for the latest information on support) but even in browsers with support...
