Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

background-color

The background-color property sets the background colour of a tag. To set a colour, you specify a named colour, a hexadecimal RGB value or an RGB colour value:

body {background-color: white;}
h1   {background-color: #6633FF;}
h2   {background-color: rgb(0,0,255);}

The named colours are:

There aren't very many of them but the colours work on all machines.

You can also use:

  • The hexadecimal RGB values preceded by a hash sign (#). For example, #FFFFFF is white, #000000 is black ,#FF0000 is red, and #0000FF is blue. There is a shorthand notation for some colours, you can use #369 to represent #336699
  • Integer RGB values. These are like the values you see in Paint Shop Pro and quite a lot of other graphics packages. For example, 255,0,0 is red, and 0,0,255 is blue
  • Percentage RGB values

If you supply percentages or integers, you must enter the keyword rgb and put parentheses around the three values that you separate with commas.

You can put colour behind a paragraph, a phrase, a word or even a letter if you like:

This html….

Displays as….

<p span style="background-color: #00FF00">You can put a colour
behind a paragraph</p>

You can put a colour behind a
<span style="background-color:#1B8FC0">
lovely little phrase</span>

You can put a colour behind a
<span style="background-color: #00FF00"> word</span>

You can put a colour behind a
<span style="background-color: red"> l</span>etter

Internet Explorer 4 and 5 put a coloured rectangle around the whole paragraph. Netscape does something different, it puts the background colour around the just the text itself.

You can also make the background colour transparent to make the underlying colours shine through.

For details about all the colours you can pick from, see Colour list.