If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

Background colors and images can be used for stylistic effects and can be an important element in the design of web sites.

With standard HTML, one can assign backgrounds to a web page and to tables and table data cells. Compared to what one can do with CSS, however, HTML is limited.

With CSS, background colors and background images can be applied in many different ways.


  1. The web page’s background, in any of the following manners:
    1. Background color (like standard HTML).
    2. Tiled image (like standard HTML), where the image is repeated across the top and row by row until the entire web page background is covered.
    3. Not repeated, the image printed just once. The image can be positioned anywhere in the window.
    4. Repeated across the top of the web page for one row.
    5. Repeated along the left side of the web page for one column.
    6. Fixed in position with the web page contents so the background image remains in place while the page content scrolls over the top of it.
  2. The background behind divisions of the web page, within DIV tags.
  3. The background behind tables.
  4. The background behind sections of text content.
  5. The background behind INPUT and TEXTAREA form elements.
  6. The background behind ordered and unordered lists.

This article will address only web page backgrounds. Part two will address the others mentioned above.

You probably already know how to create background colors and background images with standard HTML. As a refresher, the color and/or image URL are specified in an attribute of the BODY tag. Here are the methods, the first a yellow background color, the second specifying a background image:

<body bgcolor="yellow">
<body background="image.jpg">

The bgcolor attribute provides the color, as expected. The background attribute provides the image, but tiled to cover the entire background of the window.

Now, let’s see what you can do with CSS!

The CSS examples in this article are provided in the format used when the styles are defined in the HEAD area of a web page. For site-wide implementation, you can use an external file for the same effects.

Background Color

Here is the method of specifying a page background color. For single page, put this in the HEAD area. For site-wide implementation, you’ll probably want to put the style into your external CSS file.

<style type="text/css">
<!--
BODY { background-color: yellow; }
-->
</style>

Changing the color name (or changing the #ffff00 hexadecimal equivalent), will change the background color of the one page or all pages using an external CSS file.

Tiled Image

This will put a background image into your web page, the image repeating across the top, row by row, until the web page background is covered.

<style type="text/css">
<!--
BODY { background-image: url(image.jpg); }
-->
</style>

The URL can be specified as relative or absolute. The following are all valid formats:

url(image.jpg);
url(graphics/image.jpg);
url(http://domain.com/pictures/image.jpg);

Image Not Repeated, With Exact Positioning

This will print the background just once, placing it in the top-left corner of the web page.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
}
-->
</style>

To position the image in a place other than the top-left corner, use the background-position label. For example, this will print the background image at the right-top of the web page.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: right top;
}
-->
</style>

The words you can use for positioning are:

top bottom left right center

Note that the above words apply to the entire web page, not just the browser window. Thus, “bottom” means the bottom of the page, not the bottom of the window.

Positioning can also be specified by distance measurement and by percentages.

This style will place the top left corner of the image 400 pixels in from the left page margin and 100 pixels down from the top page margin.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 400px 100px;
}
-->
</style>

And this style will calculate the distance 10% from the left and 20% from the top.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10% 20%;
}
-->
</style>

Calculation is done using both the dimensions of the page and the dimensions of the image, the same percentage of each. The point 10% in from the left of the image will be placed at the point 10% from the left of the web page. And the point 20% from the top of the image will be placed 20% from the top of the web page. It can be a hard concept to grasp without a drawing. But try it, specifying different percentages until you gain an experiential understanding.

Background Image Repeated Across the Top of the Web Page

This style will repeat your background image across the top of the page, one row.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: repeat-x;
}
-->
</style>

Background Image Repeated Along the Left of the Web Page

This style will repeat your background image along the left of the page, one column.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: repeat-y;
}
-->
</style>

Background Image Does Not Scroll When Web Page Scrolls

To make your background image stay in place while the web page contents are scrolled over the top, use this style:

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-attachment: fixed;
}
-->
</style>

An Application

Let’s suppose you have a nice little image of a flower. You want it for a background, printed in a row along the top of your web page. The flowers should stay in their fixed position when the rest of the web page content scrolls.

It can be done this way:

<style type="text/css">
<!--
BODY {
background-image: url(flowers.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
-->
</style>

Knowing how to use and position background images can enhance web page design.

See part two for ways to use background colors and images in the web page content itself.

Filed Under: CSS, HTML, How To, Quick Tips, Tutorials, Web Design, Web Resources 
Tags: