PageResource.com - Web Development Tutorials

Color and Background Properties

How to change colors and Backgrounds
home    DHTML Pit Stop  |  CSS Index  |  CSS Properties  |  HTML List

Home/DHTML/CSS/Background and Color Properties

Here are some explanations and examples of the css background properties.

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.

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy