Color and Background Properties

---

Home/DHTML/CSS/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 cetain 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!

<FORM>
Name: <INPUT TYPE="text" size="25" style="background-color:green">
</FORM>

Now just look at this........

Name:

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:

<SPAN style="background-image:url(http://www.pageresource.com/images/scare.jpg)">
Can you even read this?
</SPAN>

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.pageresource.com/images/scare.jpg)" border="1">
<TD>AAAGH! Can you read this?</TD>
</TABLE>

And you get the image background.....

AAAGH! Can you read this?

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

<FORM>
<TEXTAREA rows="10" cols="50" style="background-image:url(http://www.pageresource.com/images/scare.jpg)">
</TEXTAREA>
</FORM>

Now try filling out THIS form.........

Well, that does it for now, let's move on to The Cursor Properties.

---

Partners

---

CoolHomepages | Web Design Library | Website Content

---

The tutorials and articles on these pages are © 1997-2007 by John Pollock and may not be reposted without written permission from the author, and may not be reprinted for profit. Disclaimer.

---