shadowline
Link Style << Background Style >> List Style
Background colors and images can be placed as a main page background, a table or cell background, or even a text background.

Both of the background-color and background-image properties can be specified for ANY regular HTML tag.



Background Color

background-color is used to specify the main background color of the page. It can also be used on regular or linkied text.

This shows how to declare a WHITE background for the main page area using embedded CSS :
<style type="text/css">
<!--
body {background-color: #ffffff;}
-->
</style>

Now, add in a command line that will create a red background color for any text within an h3 tag set :
<style type="text/css">
<!--
body {background-color: #ffffff;}
h3 {background-color: #ff0000;}
-->
</style>

And add in a CLASS command to create a BLUE background when it is used in the main BODY code area :
<style type="text/css">
<!--
body {background-color: #ffffff;}
h3 {background-color: #ff0000;}
.blueback {background-color: #0000ff;}
-->
</style>

The main area of the page will be white. Any text or objects within an h3 tag set will now have a red background behind them. Any text or objects within an HTML tag using the class="blueback" will have a blue background behind them.



Background Image

Images can be used for backgrounds as well. They can be used behind text or objects as well as the main background.

Using the example from above, add in an image to show as the background. Since there are some non-image capable browsers, it's best to leave the color property in as well.

<style type="text/css">
<!--
body {background-color: #ffffff;
background-image: url(SomeImage.gif);}
h3 {background-color: #ff0000;}
.blueback {background-color: #0000ff;}
-->
</style>

Adding another property to the same { } is allowed. Just separate them with a semi-colon and space. You can have them on the same line, or on the next line as seen in the example.

There is a url( ) area. If the image is in the same directory as the page, you can use just the image name, or you can specify the complete URL of the image.

Now add in another CLASS type to create an image background when it is used in the main BODY code area :
<style type="text/css">
<!--
body {background-color: #ffffff;
background-image: url(SomeImage.gif)}
h3 {background-color: #ff0000;}
.blueback {background-color: #0000ff;}
.imgback {background-image: url(SomeImage2.gif);}
-->
</style>

Any text or objects within an HTML tag using the class="imgback" will now have an image background behind them.

With all backgrounds, be sure to use one that will allow the text to stand out and be seen easily. Nothing is worse than getting to a site and not being able to read the text over a distracting image.



Repeating

Normally, the background "tiles" the image. It repeats the specified image both horizontally and vertically. This can be controled using the background-repeat property. The values for this property are repeat-x, repeat-y, and no-repeat.

repeat-xtiles the image across left to right only.
repeat-ytiles the image top to bottom only.
no-repeatwill cancel any repeat of the image.

This example shows how to produce a left side image border using the embedded CSS.
<style type="text/css">
<!--
body {background-color: #ffffff;
background-repeat: repeat-y;
background-image: url(SomeImage.gif)}
-->
</style>

Or it can be shortened to :
<style type="text/css">
<!--
body {background-color: #ffffff;
background-image: url(SomeImage.gif) repeat-y;}
-->
</style>



Position

Normally, a background image will start at the top left corner of the window. This may be controlled using positioning.

<style type="text/css">
<!--
body {background-position: top left;}
-->
</style>

The example above shows values that would adjust the background image to the same as it normally would.
The first position value can be set to top, center, bottom, percentage, or pixel setting.
The second position value can be set to right, center, left, percentage, or pixel setting.


Fixing (Sticky)

Normally, a background image will move along with the scrolling of a page just like any text or image does. This may be controlled in IE 4+ viewers using a fixed setting.

<style type="text/css">
<!--
body {background-attachment: fixed;}
-->
</style>

This probably works in Netscape7+ as well. Any version below that doesn't support a fixed background.



Grouping

The background properties can be grouped together into one command. Grouping may cause confusion in some browsers. Sometimes it's just a matter of changing the order in which the properties are listed in the command. Trial and test everything in different browsers to ensure the best results.

<style type="text/css">
<!--
body {background: #ffffff url(SomeImage.gif) no-repeat top left fixed;}
-->
</style>
Link Style << Background Style >> List Style
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow