Just Free Templates

CSS3 is something a lot of web designers and coders are getting very excited about thanks to numerous new properties and changes designed to make life a whole lot easier. In this blog post we’ll explore the new background properties which CSS3 will introduce plus the core changes since CSS2 and guide you through using them!

Backgrounds may seem a relatively simple property in CSS but they can be used for a lot of “advanced” design features – such as faux columns, rounded corners, fluid tabs and even rollovers. Before reading this tutorial you should already have a good idea about the current background properties available in CSS2.1

Note: CSS3 is still a work in progress with the specification subject to change, the details of this tutorial were correct at time of publishing, any updates will be made as clear as possible. To views demos on this website you will require a browser with support for the latest web technologies such as Firefox, Chrome or Opera.

Changes since CSS2

Firstly we’re going to take a look at the changes CSS3 has made to the current CSS2 standard.

Multiple background images

You can now set multiple background images by listing a comma separated list in the background-image property:

1
2
3

body {
    background-image:url('top.jpg'), url('middle.jpg'), url('bottom.jpg');
}

As the above image names suggest, the first image in the list is placed at the top and those thereafter are layered on top of each other:

Improvements to background-repeat

Background repeat now has two new values – space and round. Both of the these values are improvements over the CSS2 repeat value. With “space” the background image will be repeated with an equal space between each tile such that a the images will never be cut off at the ends of the pages.

The “round” value fixes the same problem of cut off images but by scaling the image tiles to fit rather than adding spaces.

Fallback colors

A change has also been made to the background-color property which allows you to set a “fallback color” – a background color which will be used if the bottom-most background image cannot be drawn. This uses a new syntax:

1
2
3

div.example {
    background:red / green;
}

The first colour is the default – the second, after the slash, is only shown if the background image fails to draw as described. If you don’t want to provide a fallback colour, just use the CSS2 syntax. If you just want to provide a fallback color simply remove the default color but keep the slash:

1
2
3

div.example {
    background: / green;
}

This is the equivilent to:

1
2
3

div.example {
    background:transparent / green;
}

What’s new in CSS3

A number of new properties have been added to the background in CSS3 to add features to the current standard.

background-clip and background-origin

These properties help specify where the background image will show. background-clip determines whether the background extends to the border and/or padding regions of an element. Take the below box, with 20px of padding and a 5px blue border:

To demonstrate the background-clip property, we’ll be adding a simple blue circle to the box. The default property is “border-box” or “no-clip” – this means the background image will show behind the border. There is also “padding-box” – meaning the background image won’t show behind the border but rather behind the padding. The third and final property is “content-box” meaning the background image won’t show behind either the border or padding of the element:

background-origin has takes the same values and is generally used together with background-clip. background-origin sets the origin of the background when used together with background-position. For example, a background image positioned 5px from the top will show in the following positions using the different values for background-origin:

The difference between the two properties may be hard to spot, the easiest way to explain it is that background-clip refers to the background as whole whereas background-origin will only be applied to background images. In the below example the background-clip property has been set to “border-box” – meaning the background color extends behind the border. The background-origin property has been set to “content-box” – meaning the background image, which is positioned in the top left, will be placed at the top left of the content area.

This example on the other hand has the background-clip property set to padding-box, stopping the background-color from extending behind the border. The background-origin property on the other hand has been set to border-box – moving the circle to the very top corner of the demo, behind the border.

background-size

Okay, this is an easy one – it allows you to resize your background images on the fly in a number of ways. Firstly there are the values “contain” and “cover” – contain specifies the background image should be scaled down to fit the element (“the element should contain the background image”), taking into account the value of background-origin. Cover specifies that the background should be scaled up to cover the the area (“the background image should cover the element”)

You can also specify a pixel value like so:

1
2
3

div.example {
    background-size: 25px 25px;
}

Where the first value is the width and the second the height. You can use “auto” to scale an image, for example:

1
2
3

div.example {
    background-size: 100px auto;
}

Will resize the background image to 100px wide with the correct height to maintain the correct proportions.

You can also specify a percentage to scale an image, the percentage is relative to the size of the ELEMENT, not the IMAGE! For example:

1
2
3

div.example {
    background-size: 50% 50%;
}

This background image will be resized to half the height of the div.example and half the width. Unfortunately support for this property is very rare and not very good so we can’t provide any live demos at the current time!

background-break

background-break deals with inline elements (such as <span>s) which have been split into “boxes” – this allows an inline element to span a number of lines. The default value is continuous – treating the background as if it hasn’t been split into boxes, the background image will continue onto the next box.

The value “bounding-box” will take the spaces between boxes into account and apply the background once to the all boxes as one

The value “each-box” will apply the background to each box.

Lots more to look forward to

CSS3, together with HTML5, are now both coming along nicely with lots of new features for designers to take advantage of in their sites. Of course, even once CSS3 has become a standard we may be waiting some years until IE implements it!