You can do allot with CSS color and layout options, but the real power is the ability to put a image background on just about any element of your page.  We've talked a little about this with banners and logos and will continue to talk about it because it is that important to your design.  For now we will just look at the background property and it's various values. Keep your PSG cheat sheet handy for a visual guide. 

Broken down backgrounds 
I will show you each property and then I'll show you the shorthand for incorporating all properties into one statement. 

Background color

To effect the background color of any block element is a simple as:

#header  {

background-color: #454545;

}

Background Image

You can put a image in the background of any element with "URL" just place the image URL inside of the "()". I sometimes will upload images onto my SocialGo Network, right click on them.. and tada! I have my Image URL.

#header  {

background-image: url(www.mysite.com/image.gif);

}

Background Repeat

The most powerful thing about the background image is that you can tell it to repeat vertically horizontally or both directions... or not to at all. Let's look at the three options.  You see the little green line bellow. Well it's small when by itself but if I repeat it horizontally, it makes the button you see bellow.

One small image:



Makes this when repeated (repeat-x):



Repeat horizontal and vertical

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat;

}

Repeat horizontal

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat-x;

}

Repeat Vertical

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat-y;

}

Background Position

The background position property is great for lining things up. You can use it on X and Y and no-repeat, But, it's a little different with each of these values. For instance if we have a image that is repeating horizontally (repeat-x) we can tell it to move up or down, but when we tell it to move right or left, it will only change the starting place of where it repeats.

The many variations of position

You can position a background image by it's x and y values. we can do this with percent, or pixels or just telling it "center" or "right". We tell it both the X and the Y in the same CSS statement.

#header  {

background-image: url(www.mysite.com/image.gif);
background-position: center left;

}

Here are all the possibilities when using a pre-defined position. Remember you are stating BOTH the X and the Y in the same value (top left)

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

 

Using percentage

You will want to use percentage when something may change size but you want the position of the image to stay relative to it's parent's position. You might use this when you have a arrow background in your nav, that needs to be in the same 52% position no matter how long your nav button is. Here is a picture to show you how I used it on SG's template.


  

You see, the magazine button is wider than the home button, but the arrow stays right in the center no matter how wide the button is stretched. Here is the CSS i used.  

#header  {

background-image: url(www.mysite.com/image.gif);
background-position: 50% bottom;

}

Background Shorthand

Believe it or not, we can compress all of that junk above into one pretty CSS property. Study bellow and see how I've incorporated all properties in one.

#header  {

background: #dfdfdf url(www.mysite.com/image.gif) no-repeat %50 bottom;

}

With one slight of hand I've put a background color, Image, repeat state and position in that order. That's the way to do it.