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.
Everything you need to know about CSS3 Background-size
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.
Supersize that Background, Please!
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.
How to Resize Background Images with CSS3
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.
Perfect Full Page Background Image
The goal here is a background image on a website that covers the entire browser window at all times.
Take advantage of the CSS background-size property
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).
Using CSS Background-size Responsively
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.
Make a Full Screen Image Background With a Line of CSS
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.
