[advanced search]

Home

HTML

Basics

Text Tags and

Text Positioning

Images

Links

Forms

Tables

Frames

Adding Sound

Meta Tags

Horizontal Rules

Comment Tags

Tips & Tricks

HTML Tips

ASCII Codes

RGB Color Chart

Refreshing Pages

Viewing Source

CSS

Basics

Selectors

Properties

Values

Cursor Effects

Positioning Content

Measurement in CSS

Centering with CSS

Custom Form Buttons

CSS For Links

JavaScript

Script Archive

XHTML

Basics

Rules

Site Success Center

Site Promotion

Monetize Your Site

Extras

IE Vs. FireFox

Downloads

Myspace Comment

---

---

Color & Background Properties in CSS

Table of Contents Color Background Color Background Image Background Repeat Background Attachament Background Position Background

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.

The body tag is designed to specify the background color or image in each page and the HTML language does give you the option of changing text colors as you wish, or assigning colors to certain elements. 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. With text the color property will change the text color, other items (like the horizontal rule) will have the foreground color change with the color property.

The color property, when used in style sheets great 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 an rgb-hex code to signify the color. An rgb-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 here.

Background Color

Background color is easy to set. You can either use the color keyword or a hex code, or you can even set the color as transparent. With style sheets you can give different elements in the same page different backgrounds. With this HTML below 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 background color specified in the body, for example). That is usually unnecessary 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 (the body, for example). For example, you can set the background image for all blockquotes to be an illustration of mouth cancer you really enjoy looking at. You would do that like so:

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

That way the background for all your blockquotes will be the mouth cancer image. This can be used to make a static (aka stationary, still, or unmoving) background image on your page. Instead of the blockquote tag (or paragraph tag, or table tag) use the body tag and the whole page will have a background. Take a look at this code which applis a background image to the body.

body {background-image: url(backgroundimage.gif); background-repeat-y;}

The image would repeat along the y-axis. You could have it repeat along the x-axis, as well, or you could use the value no-repeat. Below is a more in-depth explanation.

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 (backgroundimage.gif); background-repeat: repeat-x;}

In that example the background does repeat and it repeats along the x-axis. If you paid attention in math class you might know that the x-axis is horizontal (-) and the y-axis is vertical (|). And if you are really uneducated and you can't understand this concept then I should let you know that horizontal means from side-to-side while vertival means up and down.

Here's another example for you:

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

In order to have the background repeat along both the x and the y-axis (both vertically and horizontally) you would have a style like this:

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

To further elaborate, 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 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 attachment. The attachment is whether or not the image will move as the visitor scrolls down. Fixed means it will not and scroll means it will. If the background is fixed, then even though the visitor scrolls up or down the background will not scroll move. Imagine that the content of the page is transparent and the content will move but the background, which you can see past the content, does not move. it is fixed though the viewable area of the page is moving.

body {background-image: url (backgroundimage.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. Scroll, though, is the default setting. That means that if you do not use this style at all your background will automatically scroll away as the user scrolls away.

Background Position

So, you want your background positioned, huh? You can pick just where your background will appear thanks to CSS. Cool, isn't it? Yes, it is!

You need to have a background image specified to use this command, because without an image you aren't positioning much of anything, are you?

Positioning with Keywords

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

body {background: url (mybgimage.jpeg) left top;}

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

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

In that example the background will appear 50% from the left and 0% from the top. So it will be in the top and middle of the page.

body {background: url (mybgimage.jpeg) center;}

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

body {background: url (mybgimage.jpeg) bottom;}

In that example the background will appear 50% from the left side and 100% from the top (aka all the way (100%) to the bottom). 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% by default.

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 is 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 just wont work; there just isn't a keywords that has the value '14px from left and 17px from top'. So, that's where lengths and percentages come in.

So let's assume you want your background image to be 20% from the left and 30% from the top. That 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. Mix and match, friends!

Background

The background style is the shorthand command for all the background properties rolled in to one. 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 with all the available style pumped into it like a pice of sausage:

p {background: url (backgroundimage.gif) gray 50% repeat fixed'}

In this example the background image is backgroundimage.gif and the color is gray, the positon is at 50%, it repeats along both the x and y axis and it is fixed.

And that wraps it all up. Get outta here!