Background images are usually the largest in any web design, both in terms of dimensions and file size. Some are several hundred pixels across, and they're usually part of every page of the website. If you reduce the image quality of your background imagery too far, you end up with gritty, pixelated backgrounds across your entire site. Conversely, if you upgrade the image quality of your background images even slightly, their file size grows tremendously, causing the designer to pay dearly for sharp backgrounds at the cost of hundreds of kilobytes. Because background images are so large and prominent, designers are frequently fighting this battle between a slow-but-sharp-looking design and a lightweight, fast-loading website with less-than-perfect images.

Thankfully, new capabilities introduced in CSS3 have put an end to this dilemma while supporting both site speed and image quality. Instead of using bulky background image files or gritting your teeth with grainy background images, you can rely on the browser itself to render backgrounds with nothing more that a few lines of CSS. The result is pixel-perfect layouts with quick, snappy page loads. So, close out of Photoshop for now and give these powerful new CSS3 backgrounds a try.

Simple CSS3 Gradients

Although it's fairly simple, our first example is quite practical for real-world design implementations. Most of the time, gradients are intended to be a smooth transition from one color to another. That's exactly what we've prepared for you below:

If your browser supports CSS3 gradients, the above background should transition smoothly top-to-bottom from navy blue to sky blue. If your browser does not support gradients, you should see our "fallback" color – a solid navy blue. Setting fallbacks is easily done with existing, fully-supported CSS declarations, and in this case it allows you to use cutting-edge technology without causing problems with older, CSS3-unfriendly browsers.

The gradient above was achieved with the following CSS declarations. Note that the code has been reiterated for Webkit, Mozilla, Opera and other browsers:

.lineargradient {
   background-color: #002A6D; /* navy blue "fallback" */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#002A6D), to(#CCE2FF));
   background-image: -webkit-linear-gradient(top, #002A6D, #CCE2FF);
   background-image:    -moz-linear-gradient(top, #002A6D, #CCE2FF);
   background-image:     -ms-linear-gradient(top, #002A6D, #CCE2FF);
   background-image:      -o-linear-gradient(top, #002A6D, #CCE2FF);
}

CSS3 Radial Gradients

More sophisticated uses of CSS3 gradients involve "radial gradients," where the color gradient emanates from a single fixed point. In the radial gradient example below, the rectangle is dark blue with a light blue radial gradient in the exact center.

If you stretch and shrink your CSS3-compliant browser, you'll see that the gradient adjusts to accomodate the change in browser width. You don't need Photoshop work or fancy Javascript functions to achieve this; all you need is the following CSS:

.radialgradient {
  height: 250px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #5389CC, #073D7F);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#5389CC), to(#073D7F));
  /* opera, IE and other browsers cannot create radial gradients yet */
}

Why Not Use Image Slices?

Similar effects are often achieved with very skinny images of gradients that are repeated across page elements using the "background-repeat" property. Even if the image is only 1 pixel in length or width, using "repeat-x" or "repeat-y" will "stretch" the image across the desired space.

While this is certainly better than using a giant image, it's still not as flexible or efficient as CSS3 gradients. If you needed to adjust your design and require a gradient of a different height, width or color, you'll likely have to go back into Photoshop to work with a painfully-skinny image. If you adjust the size of page elements without revising your imagery, your tiny gradient image might not fit the purpose anymore, leaving you with a very ugly seam or a glitchy background that stops short or repeats itself. Not pretty.

And, despite the fact that those tiny images are often just a few kilobytes, they could never be as small and efficient as a block of CSS code. Tiny image slices are certainly an improvement over giant images, but they'll never be as easy to manipulate or as quick to load as browser-based backgrounds that are rendered on the client side.

CSS3 Multiple Backgrounds

If you know how to declare backgrounds with current CSS2 standards, you'll have no problem using CSS3's multiple background capabilities. Multiple backgrounds still use properties such as "background-repeat," and "background-position," but they employ comma-separated values to distinguish which declarations are intended for which backgrounds.

The above clouds, cheeseburger and smiley face are entirely separate images layered together with CSS. The three different backgrounds above were all achieved with some very simple, mostly familiar CSS:

div#multibackground {
width: 500px;
height: 250px;
background-image: url('/happyface.png'), url(burger.png), url(bluesky.jpg);
background-position: left bottom, right top;
background-repeat: no-repeat;
} 

Note that the first background declared - in this case, "happyface.png" - is considered the frontmost background. Because "bluesky.jpg" is declared last, it's rendered "behind" the other two backgrounds.

Multiple backgrounds have all sorts of practical purposes. Where a designer used to export pre-layered images from Photoshop, they can now make CSS adjustments quickly and easily to get the layered look they require. If they ever need to replace or reposition one layer, they can just make a few minor CSS changes instead of hunting down an old .PSD and essentially rebuilding the entire graphic.

Conclusion

CSS3 gradients and multiple backgrounds are becoming more and more prevalent in modern web designs. Browsers are ramping up their CSS3 support, and designers - always eager to make a lighter, faster, prettier, more versatile design - are embracing the new technology and harnessing its potential. CSS3 will soon be the industry standard, so practicing imageless web design will prepare designers well for "web 3.0".

About the Author:

Peter North

Peter North is Director of Digital Marketing at an investment holdings company in Washington DC. He has worked for non-profits, startups and established enterprises, and he’s left a long trail of happy clients and powerful, effective websites.