Demo: Multiple Backgrounds with CSS 2.1

Resize your browser. How wide am I?

Only one element to reproduce Silverback's parallax effect with more gorillas.

<div id="silverback">[content]</div>

Main: First in source

Fluid faux columns without images. Source independent. The use of rgba background is only to show the area of each box.

No problem putting links in the content. The markup for this section looks like this:

<div id="faux">
    <div class="main">[content]</div>
    <div class="supp1">[content]</div>
    <div class="supp2">[content]</div>
</div>

Supp1: Second in source

Vivamus auctor, tellus vel dictum pulvinar, a congue elit odio vel enim. Quisque fringilla semper fermentum. Nulla a felis a diam dapibus accumsan. Etiam varius fringilla magna sit amet hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Supp2: Third in source

Sed accumsan neque a nisi luctus volutpat. Quisque placerat nibh ac leo varius non varius lacus cursus. Curabitur bibendum volutpat eleifend. Nullam sit amet dolor massa. Nunc consectetur ornare purus, et euismod nunc cursus at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec aliquet leo nec quam vestibulum non mattis odio dapibus. Curabitur consequat odio odio. Proin a justo at lorem ultricies hendrerit.

Dribbble style buttons without images

This example uses one element and one image (a sprite).

Using pseudo-elements for additional background-images lets you clip sprites and fake the positioning of a background image from any side (not just the top and left).

<div id="sprite">[content]</div>

The background can even live outside the box

Images that break out of the box are a popular effect. This is easy to achieve with pseudo-elements. No need for images in the markup, nested elements, or empty elements.

Depending on the look you're after you can absolutely position or float the pseudo-element. This technique gives you a lot of flexibility over the positioning of presentational imagery. They can be part of the normal flow; or content can flow around them (float); or they can be removed from the document flow entirely and positioned from any side (absolute/fixed positioning).

This example floats the pseudo-element so the main content's text will wrap around this image.

<div id="outside">
   <div class="hero">[content]</div>
   <div class="main">[content]</div>
</div>

An element with the popular folded-corner effect (with CSS only), two background images, and a generated-content image.

P.S. Don't let your designer friends see my comic sans

<div id="corner">[content]</div>

Jquery for Designers uses nested div's and 3 images on its About page to create this effect. Using pseudo-elements as background canvases, just one element is needed.

<div id="j4d">[content]</div>