The Designer’s Guide to CSS3: Backgrounds

CSS3 brings changes to how designers and web developers work with backgrounds, and considering that background images and colors are fundamental structural elements of websites, improvements in this area have a huge impact. With CSS3 we can now have code-based gradients in addition to the traditional solid colors. You can also assign multiple background images to a single HTML element. Another new option allows developers to scale background images with CSS tags.

The Designer’s Guide to CSS3

These options, like many of the new CSS3 features, don’t fundamentally change what designers design. But they do mean the design can be recreated with vastly more efficient HTML code. Cleaner code makes responsive web design far easier, and cleaner code has a longer shelf life. This ultimately makes the sites you build with these techniques more valuable. Just make sure you understand browser compatibility, fallback options and how they’ll impact the variety of experiences your users might get. Let’s dig in and see what we can do with these new CSS3 background techniques.

CSS3-based gradients

You’ve probably seen gradients used as the background of a web page or a container. Now, instead of generating images to do this, with some CSS-based code, you can apply a color gradient to the background of an HTML element.

When background gradients are created with images, the images and associated code are extremely tiny. Most often you use a tiny slice of the gradient and repeat it in the appropriate direction. It’s not a big code-suck. So you won’t save a lot of data by using CSS3 here, but code-based gradients are still awesome.

The new approach lets you provide the code to complete the design—it doesn’t require the developer to generate any images. Best of all, you can change the background with little effort. JavaScript can be coded to make these changes, which opens up countless possibilities.

CSS3-based gradient tools

Multiple background images with CSS3

For more visually complex containers, it’s not uncommon to have three or more divs stacked inside each other, with this concept repeated throughout a site. So I’m sure you can see how much extra code can be eliminated by being able to set multiple background images with CSS3.

Again, this won’t necessarily affect how you design, but it’s helpful to understand your design’s implications on the coding process. (Especially if you plan for a fallback option for when a browser doesn’t support this feature.) This simple writeup will help you code these elements if you’re interested in doing so.

Background sizing with CSS3

Before CSS3, when you applied an image to the background of an element, it simply rendered the image at the size it was. But now with CSS3 you can scale these images up and down. The primary perk is the option to reuse images. If you carefully plan the images in your layouts, you can aim to repurpose them throughout the layout.

Frankly, this feature is hard to apply. The situations where it will work out are few and far between. But I suspect clever designers and developers will find a use for it that will demonstrate what a great trick it is, and the masses will follow.

Next up: Text styles in CSS3

CSS3 Resources from