One of the first things you will discover when you start working with responsive designs and flexible-width layouts is that you need images that can adjust to the screen size as well. A while ago, I showed you how to use the CSS3 property
background-size to stretch images to fit in a window, but there is an even better use for this property:
cover keyword tells the browser to scale the image to fit the window. The image is scaled to cover the entire screen, but the original proportions and aspect ratio are kept. The image is placed in the window as large as possible so that the entire window surface is covered.
As you can see in this series of images, this results in a page that looks a lot better even if the screen is very small or very large.
background-size: 100%;in a large browser window
background-size: 100%;in a small browser window
background-size: cover;in a large browser window
background-size: cover;in a small browser window
How to Use
Create your background image. It’s a good idea to create an image that is fairly large, as while browsers can make images smaller without a loss in quality, often when they make them larger, the images get fuzzy or blurry.
Upload your image to your web host and add it to your CSS as a background image:
background-position: center center;
Add the browser prefixed CSS first:
Then add the CSS property: