How Do I Add a Background Color to a Web Page


So you want to jazz up the background of your web page instead of using the default white color that most websites use. There are several ways to achieve this. One way is to simply change the background color and the other is to use a background image.

How to put an image as a background on a web page

If I want to change your web page background to grey use this html code:


<body bgcolor="#CCCCCC"></body>

You can use any color in place of #CCCCCC or even use the words green, red, etc.

Cascading style sheet
You can also use a cascading style sheet (CSS) and place it between the head tags. This eliminates the need to use the code above, have less code clutter and speed up the load time of your web pages.


<head>
<style type="text/css">
<!--body {background-color: #CCCCCC;}-->
</style>
</head>

Inline CSS
This is another method to add a background color. Instead of using an external style sheet placed between the head tags as shown above, code it directly into your html like this:


<body style="background: #CCCCCC;">

Inline CSS allows you to style any HTML element. For example if I want to add a background color to a paragraph use this code:


<p style="background: black; color: white;">black background with a white font color</p>

black background with a white font color

Tables
You can add a background color to tables using this code:


<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#000066">
  <tr>
    <td></td>
  </tr>
</table>

This will give you a table of 600 pixels with a dark blue background.

Tip
When using background colors for your web pages make sure you use contrasting colors (ie white on black or black on white) so your website visitors can easily read your content.

My next article will discuss How To Add a Background Image to a Web Page
****************
Get a free evaluation of your website by visiting:
Free Website Evaluation

Comments

  1. Is there anywhere which lists those colour codes “#CCCCCC” for easy reference.
    Off to free evaluation site now.

Trackbacks

  1. […] Related Articles http://www.w3schools.com/css/css_background.asp How Do I Add a Background Color to a Web Page […]

Leave a Reply to How Do You Put an Image as a Background Cancel reply

*