Affecting the background of your pages, tables, and even block elements like the paragraph tags is easier than you think when using Cascading Style Sheets. Using CSS, you can:

• set an image as a background to an element
• indicate the tiling position of the background image
• define the location of that image, like a watermark

Change the Background Color

background-color
usage:

background-color : color value;
background-color : rgb(30%,30%,30%);
background-color : transparent;

Setting the color of your background is easy, and with CSS you can now use both hexadecimal values and RGB values. Plus, you can set some elements to have a transparent background color, so that the background will allow other colors to show through. You can set the background color on most block elements in current browsers.

Try this out in your web page:

<p style="background-color: #cc0000; color : #cccccc; width : 200px;">
The background color of this paragraph is a dark red. It was set using a paragraph tag with the style attribute background-color:#cc0000;. e.g. style="background-color:#cc0000;">
</p>

Examples of background-color.

Before you begin using the following style elements in your documents, you should be aware that these elements are supposed to work on any block-level elements. Be sure to test them in the browsers you support, as some browsers only support these styles on the BODY tag.

Add Background Images

background-image
usage:

background-image : (URL);
background-image : none;

Write a URL to a specific image to display as the background for your element.

Test this out by putting the following code in your document:

<p style="background-image : url(http://webdesign.D106/library/graphics/bg-grid.gif); width : 200px;">
This paragraph uses the background-image element to create a grid pattern behind the paragraph. e.g. style="background-image : url(http://webdesign.D106/library/graphics/bg-grid.gif);"
</p>

Examples of background-image.

Keep the Background Image from Scrolling

background-attachment
usage:

background-attachment : fixed;
background-attachment : scroll;

If you use a background attachment of fixed, the background image will be held in one place like a watermark. Using the scroll type will set the image to scroll with the rest of the page. This is the default and standard for background images.

Examples of background-attachment.

Tile Your Backgrounds, or Not

background-repeat
usage:

background-repeat : repeat;
background-repeat : inherit;
background-repeat : repeat-x
background-repeat : repeat-y
background-repeat : no-repeat

The default behavior of web backgrounds is to repeat endlessly. Thus background images often have to be very large to insure that they don't repeat incorrectly on larger monitors. This tag allows you to specify that a background image might repeat only on the x or y axis, or not repeat at all.

Use this property on block-level elements as well. Examples of background-repeat.

Choose Where to Place the Background Image

background-position
usage:

background-position : value;
background-position: vertical horizontal;

If you use two values then you will position the background on both the vertical and horizontal plane.

Sets the location of the background image with one of these values:

• top
• bottom
• left
• right
• center
• length
• percentage

Examples of background-position.

Making Multiple Changes to Your Backgrounds with One Element

Once you understand the different CSS elements you can use to affect the background of your pages and elements, you can combine them into one CSS element. The background element. This is a CSS shorthand property.

background
usage:

background : color url(URL) attachment position repeat;

Follow the instructions for the above elements to define your backgrounds as you would like them.

Examples of background shorthand property.

Stay up-to-date on HTML and CSS with the most recent articles.