The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:

View the live examples page

Background Size

Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.

The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:

1
2
3
4
5
6
7
8
9
10

.backgroundsize {
background: url(http://www.designshack.net/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

Multiple Backgrounds

The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects which previously required more than one div. Whether it will be possible to combine this with background-size will be interesting to see.

The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.

1
2
3
4
5
6
7
8

.multiplebackgrounds { 
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

Background Origin

CSS3 allows you to specify how the position of a background is calculated. The background-origin property can be set to start positioning from either the border, padding, or content. This allows for greater flexibility in terms of placing a background image.

In conclusion…

There are a whole new variety of background options available with CSS3. As with all the other modules covered in this introductory series, it leads to greater flexibility and makes it much easier to recreate previously complex effects. Whilst not supported by most browsers as yet, it shouldn’t be too long before you can get creating stunning user interfaces with these new additions.

We really hope that you have enjoyed this series, and we’ll be keeping you up to date on all the latest CSS3 developments as they happen over coming months. Here’s looking forward to the next generation of style sheets!

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:

View the live examples page

Multiple columns using CSS3

At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

• column-count
• column-width
• column-gap
• column-rule

At present, a browser specific selector is also needed to identify whether Safari or Firefox should display the selector. The code to be used to create a two column layout with a 1px rule between columns would be:

1
2
3
4
5
6
7
8

.multiplecolumns {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Spanning columns

It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:

1
2
3

h2 {
column-span: all
}

Numbers can also be used to allow the element to span a certain number of columns. At present this feature isn’t implemented in any major browsers, but should provide much needed additional flexibility when designing around this feature. It would allow you to achieve effects such as:

In the meantime

It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.

In conclusion…

Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.

The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds