Unlimited Downloads : 400,000+ Design Assets
Another new property introduced by the CSS3 Backgrounds and Borders module is background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.
Here’s a very basic example. In the first box below background-size has been set to auto (the default value) meaning that the background image is shown at its original size. In the second box background-size has been set to 275px (w) x 125px (h). In both cases, the background image has been defined so as not to be repeated.
With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily.
In CSS2.1, background images applied to a container retained their fixed dimensions. Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques.
The goal here is a background image on a website that covers the entire browser window at all times.
The background-size property does exactly what you would expect — it allows you to specify the size of a background image on both the X-axis (horizontally) and the Y-axis (vertically).
We use background images for a multitude of purposes ranging from full body backgrounds to icons for links. The latter you wouldn’t expect to be too much of a concern in responsive design and the techniques we use for the former hint at how we can make background images responsive.
Full screen image backgrounds are a must if you are creating a portfolio or a photography website. This usually involves using a jQuery plugin, which will properly resize the image with the browser window, and do the necessary calculations so that the image covers the entire width and height of the page.