• Home
• About
• FAQ
• Contact
• Link
• Sitemap
• Forums

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

HTML backgrounds

A background can often be an important part of a webpage. You can use backgrounds to make a webpage look more appealing or simply to add more style.

This tutorial focuses on:

• Adding a background color to elements
• Adding a background image to elements
• Choosing a good background
• Transition to CSS

Adding a background color to elements

You can set the background color of elements using the bgcolor attribute. This attribute can take a color name, a hexadecimal value, or an RGB value.

Setting the background color of a webpage

The above lines of code will all set the background color of a webpage to white.

Setting the background color of a table

To set one background color for an entire table, use the bgcolor attribute inside the <table> tag.

Setting the background color of a table row

You can also set the background color of just one table row as opposed to the entire table. To do this use the bgcolor attribute inside the <tr> tag.

Setting the background color of a table cell

You can also set the background color of just one table cell as opposed to an entire table row or the entire table. To do this use the bgcolor attribute inside the <td> tag.

Adding a background image to elements

You can add a background image to elements using the background attribute. The value of this property should be the URL of the image. The URL can be relative or absolute.

Adding a background image to a webpage

In the above code, the URL is a relative path in the first line, and an absolute path in the second line.

Adding a background image to a table

You can add a background image to a table that will cover the entire table.

NOTE: If you have an element whose dimensions are bigger than that of the image that you set as its background, the image will repeat. You can see this in action in the above example. The image begins repeating right after the 'u' in the word "background"

Choosing a good background

It is not enough to know how to simply set background colors and images, you should also know how to choose the right background.

When setting a background color....

You should always make sure that the background color goes good with the text color and images on a page as well as the general appearance of the page (everything has to work together). The general rule in web design is dark text on a light background and you will see this combination on the majority of websites out there. There are some websites that do have light text on a dark background, and to their credit, they do a good job at it as well. So it is possible to make a webpage look good with both dark text on a light background or light text on a dark background but you should stick to light text on a dark background as that is what people are used to seeing and that is the general rule on the web.

Choosing a good color scheme can sometimes be a difficult and tricky process. To help you with this, check out the website colorblender.com. You choose a color or colors, and it will tell you in real-time what color(s) go good with it.

When setting a background image....

You should always make sure that the background image goes good with the text color and images on a page as well as the general appearance of the page (everything has to work together). This is actually the same rule as with background colors, however, images are different than colors because images unlike colors require extra loading time (an image is after all, a separate file).

When setting a background image you should ask yourself these questions:

• By how much will the background image increase the loading time of the page?
  Obviously a background image will increase the loading time since it is a separate file, but by how much? If it is by a few seconds, then no big deal but if it is say 15 seconds, 20 seconds, or even greater amounts than that is no good. Such a delay may (and often times does) inconvenience a websites visitors.
• What will the background image look like when it is repeated?
  As stated above, if you have an element whose dimensions are bigger that that of the image that you set as its background, the image will repeat. You can see this in action in the table background image example above. You should make sure that a background image looks ok when it is repeated and does not make a webpage look unattractive and/or creates confusion.
• Will the background image distract the visitor from the pages content?
  It sometimes happens that a background image is so attractive/unnatractive/emphasized in some way that it distracts the webpages visitors focus and forces them to pay attention to the image instead of the actual content of the page. You should try to focus on achieving a balance between a pages background and its content where the background is good enough to add an aesthetic quality to a webpage, but not good enough to distract your webpage visitors focus.

Transition to CSS

Setting background colors and images with HTML is great, but as with fonts, backgrounds have transitioned to CSS as well.

The bgcolor and background attributes are deprecated and CSS should be used instead.

CSS provides much more functionality with background colors and background images. With CSS, you can set the background colors of more than just the webpage itself and tables, but of paragraphs, headings, links, form elements (like textboxes) and more. With CSS, you also have more power when it comes to background images. You can do things like specify if a background image repeats vertically or horizontally, set its position, and if it should move with the rest of the page or not. You can also set background images for things like form elements (like textboxes), headings, paragraphs, and more.

So you can still use the bgcolor and background attributes, but CSS should be used instead as it more practical and using CSS for styling is the standard.

If you want to get started learning about setting backgrounds with CSS, visit our CSS background properties page.