Section 8.5. Using Background Property Shorthand

8.5. Using Background Property Shorthand

As you can see from the examples above, to really take control of background images you need to harness the power of several different background properties. But typing out background-image, background-attachment , and so on again and again can really take its toll on your hands. But there's an easier waythe background shorthand property.

You can actually bundle all the background properties (including the background- color property you learned about last chapter) into a single line of streamlined CSS. Simply type background followed by the values for background-color, background-image, background-attachment , and background-position . The following style sets the background to white, and adds a non-repeating fixed background image smack dab in the middle of the page:

FREQUENTLY ASKED QUESTION
Finding Free Imagery

I'm not an artist. I can't draw, can't paint, don't even own a digital camera. Where can I find artwork for my site?

Thank goodness for the Web. It's the one-stop shop for creative geniuses who couldn't paint themselves into a corner if they tried. There are plenty of pay-to-download sites for stock photos and illustrations, but there are also quite a few completely free options. For photos, check out Morgue File (www.morguefile.com), which despite the grisly name has many wonderful photos supplied free of charge by people who love to take pictures. The Creative Commons site provides options as well: http://creativecommons.org/image/. Open Photo (http://openphoto.net/gallery/browse.html) also supplies images based on Creative Commons licenses. (Although they don't cost money, not all photos on these sites can be used in commercial projects. Make sure you read the fine print for any photo you wish to use.)

If you're looking for bullets to add to lists, icons to supercharge your navigation bar, or patterns to fill the screen, there are plenty of sites to choose from. Bullet Madness (www.stylegala.com/features/bulletmadness/) offers 200 bullets including variations on the common arrow, circle and square as well as more detailed bullets representing software icons, iPods, folders, and more. Some Random Dude (no, really; that's the name of the Web site) offers a set of 121 icons free of charge: www.somerandomdude.net/srdprojects/sanscons. And if you're looking for interesting tiling patterns, check out the patterns on these sites: Kaliber10000 (www.k10k.net/ frames .aspx?section=patterns), Pattern4u (www.kollermedia.at/index.php/pattern4u/), and Squidfingers (http://squidfingers.com/patterns/).

 body {   background: #FFF url(/books/2/835/1/html/2/bullseye.gif) scroll center center no-repeat; } 

You don't need to specify all of the property values either. You can use one or any combination of them. For example: background: yellow is the equivalent of background-color: yellow . Any property value you leave out simply reverts to its normal behavior, so say you specified only an image:

 background: url(/books/2/835/1/html/2/image/bullseye.gif) 

That's the equivalent of this:

 background: url(/books/2/835/1/html/2/image/bullseye.gif) fixed left top repeat; 

Because the background property is so much faster to type, and it achieves all the same ends as its long-winded siblings, use it liberally when adding background images (and colors) to your styles.