CSS: backgrounds with CSS3

Tweet

As I can see from the web thought statistics, there's a increasing interest in how to manage backgrounds with CSS and specifically with CSS3. So I decided to write down the following short tutorial. We are going to explore three interesting CSS properties: background-clip, background-origin and background-size.
I know, I've partially covered the subject in another post, however here we are going to see it more in depth.

Are you ready? Ok then, follow me...

CSS: Backgrounds with CSS3

Tweet

One of the most searched effects for web sites today is the background image covering all the visible area. I've already explained a method to achieve that in the past (Making background image fit any screen resolution). With CSS3 there are a set of new property that can handle it quite easily. Let's see them.

The background-size property

The background-size property defines the size of a background image (ah!). You can set the image size in pixels or percentages. With percentage, the size will be relative to the container.

div
{
background:url(example.gif);
-moz-background-size:100% 100%; /* Firefox */
background-size:100% 100%;
background-repeat:no-repeat;
}