Background and Color Properties

Lesson-10 (Background and Color Properties)

Here are some explanations and examples of the css background properties. Some of these do not yet work in Netscape. You may want to use IE4+ to view the examples on this page.

Well, now we are all the way to backgrounds again. Style Sheets will allow you to use background colors and images for your entire page and for just certain sections you would like backgrounds on.

color

The first property we'll go over is the color property. I probably have shown you this already, but just in case I didn't.........

The color property changes the forground color of a section, which is usually text. So, to change the color of some text:

This text is plain, <SPAN style="color:orange">and this makes me think of pumpkins....</SPAN>

That would give us the following sentence:

This text is plain, and this makes me think of pumpkins....

background-color

This property will let you add a background color behind most anything. You can add it to text like this:

<SPAN style="background-color:yellow">My background is yellow!</SPAN>

And you get a beautiful yellow background.....

My background is yellow!

Also, you can use this in tables:

<TABLE style="background-color:orange" border="1">
<TD>AAAGH! Pumpkin Background!</TD>
</TABLE>

And you get the old orange background.....

AAAGH! Pumpkin Background!

And how about a form box? Of course!

Bottom of Form

background-image

This is the same as a background color, but it uses an image you specify instead of a color. Also, you have to write it a little differently, using a url call:

background-image:url(http://www.pageresource.com/images/scare.jpg)

After the colon, you write "url". Then you put the url inside a set of parentheses, with no quote marks around it. Here it is in action:

And we get a background that no one can read over!

Can you even read this?

And of course, the table:

<TABLE style="background-image:url(http://www.abcce.com/images/scare.jpg)" border="1">
<TD>AAAGH! Can you read this?</TD>
</TABLE>

And you get the image background.....

And how about a form textarea this time? Well, O.K.....