The Slacker's Guide to Cascading Style Sheets - Color & Background Properties

Color & background properties are used to set your preferences for, believe it or not, the colors of elements on your page and the settings for your background. That being said, you might be asking youself why you care. The body tag is designed to specify the background color or image in each page and the HTML language does give you the preference of changing text colors as you wish, or assigning colors to certain elements. Well, it does let you change text colors as you wish, but it's annoying. If you use css you can take total control over the background & color preferences within your site. With HTML you could only assign colors to link tags and text strings, and you could only set your background colors and images. With style sheets you could set the color, image, position, and it's ability to repeat or not and more. The amount of control you have grows immensely.

Color

The color property is quite useful. Here's a quick quote from the CSS Resource Guide:

"Sets the color of a given element. For text, this sets the text color; for other elements, such as HR, it sets the foreground color."

The color property, when used in style sheets, is most useful and most used to specify color changes in text elements. For example, to change the color of bold text to green you would write this code:


b {color: green}

You don't have to use a color keyword to specify colors, though, because not all colors have working keywords. A keywords, in this case, is the name of the color. Only the popular colors have working keywords presently. Those colors are as follows:
Red
Green
Blue
Yellow
Orange
Fuschia
Pink
White
Black
Teal
There are a few others, but browser differences and my bad memory stand in the way of me listing those.

You can also use a hex code to signify the new color. A hex code is a 6 digit alpha-numeric string used to specify the amount of green, red, and blue in a color. A list of colors and their corresponding RGB values can be found by downloading this. You can thank me later by bookmarking this site :-)

Background Color

Background color is easy to set. You can either use an HTML color keyword or a hex code, or you can set the color as transparent. With style sheets you can give different elements in the same page different backgrounds. Look, with this HTML you set the background for text within the paragraph tag to be blue and the default background for everything else to be black:


p {background-color: blue}
body {background-color: black}

The transparent setting doesn't do much other than make the background color transparent, which will reveal the default background color for that area (the bg color specified in the body). That is unneeded because the browser has an automatic setting for transparent if no other setting is listed.

Background Image

You can use this to set the background image for an element. For example, you can set the background image for all blockquotes to be a frog picture you really like. You would do that like so:


blockquote {background-image:
url (frog.gif)}

That way the background for all your blockquotes will be the frog image.

Background Repeat

You can use the background-repeat option to choose whether or not you would like the background to repeat itself, and if so if you would like to have it repeat horizontally or vertically or both. I will show you a few quick examples of the code involved with this stuff:


body {background-image: url 
(frog.gif); background-
repeat: repeat-x}

In that example the background does repeat and it repeats along the x axis. If you pay attention in math you might know that the x axis is horizontal and the y axis is vertical. Here's another example for you:


p {background-image: url 
(frog.jpg); background-
repeat: no-repeat}

In that example the image of a frog, which is the background image, does not repeat at all. It only appears once, and once you scroll down the page it is no longer visible until you scroll back up.
Just to restate this, remember that the background attributes are applicable to not just the body element now, but others, too, like the paragraph element in the above example.
In order to have the background repeat along both the x and y axis (both vertically and horizontally) you would have a style like this:


blink {background-image: url 
(frog.jpg); background-
repeat: repeat}

Now, let's say you weren't paying attention in math class in high school and you don't know your x axis from your y axis. The x axis is the horizontal axis and y is vertical. Horizontal is left to right and vertical is up and down. So, to have the background for bold text repeat left to right and not up and down you would use this code:


b {background-image: url 
(frog.jpg); background-repeat:
repeat-x}

The code for a background in, let's say, italic text to repeat vertically would be like so:


i {background-image: url
(frog.jpg); background-repeat:
repeat-y}

OK, that finishes up the background repeat style.

Background Attachment

Here's a quick lesson in background attatchment. The attatchment is whether or not the image will move as the visitor scrolls down. "Fixed" means it will not and "scroll" means it will.


p {background-image: url
(frog.gif); background-
attachment: fixed}

In that example the image will not move. If you had substituted 'scroll' for 'fixed' then it would move as the page scrolls up or down.

Background Position

So, you want your background positioned, huh? You can pick just where your background will appear thanks to style sheets. Cool, isn't it?
You need to have a background image specified to use this command, because without an image you aren't positioning much, are you?

Position with keywords

Positioning with keywords means using words that browsers accept as commands. Top, left, and bottom are three examples of positioning keywords. Here's an example of positioning with keywords:


body { background: url
(banner.jpeg) right top }

In that example the background image will appear in it's default position; at the right and top.


body { background: url
(banner.jpeg) top center }

In that example the background will appear 50% from the left and 0% from the top.


body { background: url
(banner.jpeg) center }

In that example the background image will appear both 50% from the top and left. If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%.


body { background: url
(banner.jpeg) bottom }

In that example the background will appear 50% from the left side and 100% from the top. this will make it unseen until the visitor scrolls down. If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%.

Translations of keywords in positioning

'top left' and 'left top' both mean the same as '0% 0%'.
'top', 'top center' and 'center top' mean the same as '50% 0%'.
'right top' and 'top right' mean the same as '100% 0%'.
'left', 'left center' and 'center left' mean the same as '0% 50%'.
'center' and 'center center' mean the same as '50% 50%'.
'right', 'right center' and 'center right' mean the same as '100% 50%'.
'bottom left' and 'left bottom' mean the same as '0% 100%'.
'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
'bottom right' and 'right bottom' mean the same as '100% 100%'.

Positioning with percentages & lengths

Positioning with lengths and percentages are pretty easy. Above you might've noticed a translation of the keyword values into percentages that anyone can understand.
Percentages and length are most useful when a keyword just isn't precise enough. If you want the image to appear exactly 4 pixels (4px) from the left and 17 pixels (17px) from the top then a keyword wont work; there jus isn't a keywords that has the value '14px from left and 17px from top'. So, that's where lengths and percentages come in.
Let's assume you want your background image to be 20% from the left and 30% form the top, the code would look like this:


p {background-image: url
(frog.jpg); background-
position: 20% 30%}

You can also write it in the short version:


p {background-image: url
(frog.jpg) 20% 30%}

To write the position code by pixels or points or em's or centimeters or whatnot, you would write this:


q {background-image: url
(frog.jpg); background-
position: 67px 30em}

As you can see you can use different values in the same command. You can include percentages with points and pixels with em's or whatever you want.

Background

The background style is the shorthand command for all the background properties at once. Here is the order in which they appear in this command.

background-color and/or background-image
background-repeat
background-attachment
background-position

Here is an example background style:


p { background: url(frog.png) 

gray 50% repeat fixed }

In this example the background image is the frog and the color is gray, the positon is at 50%, it repeats along both the x and y axis and it is fixed.
That ends the section on the background and color properties.