HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  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

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

<body bgcolor="#FFFFFF"> <body bgcolor="rgb(255,255,255)"> <body bgcolor="white">

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.

<table border="1" bgcolor="orange"> <tr> <td>Here is a</td> <td>table with a</td> </tr> <tr> <td>background color</td> <td>of orange</td> </tr> </table>
Output:
Here is a table with a
background color of orange

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.

<table border="1"> <tr bgcolor="yellow"> <td>This table</td> <td>row is yelow</td> </tr> <tr bgcolor="#66CC00"> <td>This table</td> <td>row is green</td> </tr> </table>
Output:
This table row is yellow
This table row is green

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.

<table border="1"> <tr> <td bgcolor="rgb(255,255,255)"> This cell has a white background color </td> <td>No background color specified</td> </tr> <tr> <td bgcolor="#8DA1B5">This cell has a blue background color</td> <td>No background color specified</td> </tr> </table>
Output:
This cell has a white background color No background color specified
This cell has a blue background color No background color specified

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

<body background="images/ice.gif"> <body background="http://www.landofcode.com/images/ice.gif">

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.

<table border="1" background="/images/sky.jpg"> <tr> <td>This table</td> <td>will have</td> </tr> <tr> <td>a sky</td> <td>background image</td> </tr> </table>
Output:
This table will have
a sky background image

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.

Examples of good background/text color combinations:
Black text on a gray background Medium blue text on a very light blue background Orange text on a black background Black text on a white background Green text on a light blue background

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:

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.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information