Adding Backgrounds and Color

Before CSS, you could only add background colors and images to the whole page, a table or table data cell. Now you have full control over what gets color or a background, even down to a single word. Not only can you easily add backgrounds, you also have control on the positioning of the backgrounds, if the background image is to repeat or not and even the direction in which it is to repeat.

The CSS properties the control color and backgrounds are:
color
background-color
background-image
background-repeat
background-position
background-attachment

Adding Color to Text

The Color property works much like it does with HTML. It is for applying color to text only. With this CSS rule, as soon as you have bold text on your page, like this text, the browser will display it in the color specified. In reality, what you're doing is specifying the "foreground" color of the text. The second example sets a Class as orange text. The third example uses the <span> tag to make the text the specified color. You can read more about selecting your colors by visiting our Choosing Your Colors Tutorial.

b {
  color: #ff6600;
}

.orangetext {
  color: #ff6600;
}

<span style="color: #ff6600;">Orange</span>

Adding Color to a Background

In order to put a background color behind an element using HTML, you have to resort to creating a table cell around the element and then filling the cell with a solid color. With CSS, background colors are much easier. By using the CSS property "background-color" you can add a solid color behind any element on a Web page, including images.

The first rule below states that anytime <p> tag is used the paragraph will have light olive background. The second rule states that by using the Class "lolive" that the element it is applied to will have a light olive background.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

p {
  background-color: #e6eec4;
}

.lolive {
  background-color: #e6eec4;
}

You can also use "background-color: transparent". This means that the background you'll see is whatever background would normally show through; that is, any inherited background color is ignored.

Adding Background Images

With CSS, you can place an image behind any element on the page. The property for all this is "background-image". You add the image's filename (which can be defined relatively or absolutely) in round brackets. Your image will tile behind whatever text or element you've added it to. You can add a background to an entire page by adding this CSS to the body. As you should have done before, whenever you specify a background image you should also add a similar-colored background color to preserve legibility.

.bg1 {
  background-image: url(img/back_2.gif
  background-color: #d4dda6;
}

Tip TIP: You may see some Web pages using quote marks as well as the brackets around the URL of the image they are using as a background, as in background-image: url("image.gif");. This is unnecessary and advised against, as it causes IE/Mac to cough and splutter. Leave the quotes out.

Controlling Backgrounds

Not only can you add backgrounds to any page element, you can control exactly how the background is displayed. With HTML the only option is for the background image to repeat. Now you can specify whether the image repeats vertically, horizontally, or not at all. The property is "background-repeat". The values you can use are no-repeat, repeat-x (horizontally), or repeat-y (vertically). If you do not specify a property, the default is to repeat.

<table align="center" width="100%" cellspacing="10" cellpadding="10" style="background-image: url(img/back_1.gif); height: 100px; margin-top: 12px;">
  <tr>
    <td style="background-image: url(img/back_2.gif); width: 25%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; width: 25%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: repeat-x; width: 25%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: repeat-y; width: 25%; background-color: #ffffff;"></td>
  </tr>
</table>

You can also specify the position of your background behind the element it is applied to. You can either position the image away from the top-left corner with pixels or used one of the allowed values: top, center, bottom, left, right.

<table align="center" width="100%" cellspacing="10" cellpadding="10" style="background-image: url(img/back_1.gif); height: 100px; margin-top: 12px;">
  <tr>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: 12px 12px; width: 16%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: top; width: 16%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: center; width: 17%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: bottom; width: 17%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: left; width: 17%; background-color: #ffffff;"></td>
    <td style="background-image: url(img/back_2.gif); background-repeat: no-repeat; background-position: right; width: 17%; background-color: #ffffff;"></td>
  </tr>
</table>

Attaching Backgrounds

There is an IE-only tag in recent times that allowed you to achieve a non-scrolling repeating background (bgproperties="fixed"), but now this is part of the CSS standards so you should use this instead. Your property for this one is background-attachment. This CSS works best if applied to the body tag, but most current browser versions you can add a non-scrolling background image to anything, which can give some nice affects. Want to see something fun?.

body {
  background-image: url(background.gif);
  background-attachment: fixed;
}

To Top TO TOP