Applying Backgrounds with CSS

Tutorial on how to apply background colors and images using the background properties of CSS.

This tutorial presume you already know about URI's and how to use them. The Article on Absolute and Relative Paths may be of help to those who dont.

This will teach you how to add a background using CSS. Adding a background is easy, all you need to do, is to use the background property, and then tell the browser where your background is located.

The properties used when applying backgrounds are listed in the reference entry Background Properties, this tutorial covers basic usage of these.

Background images.

The body element.

Applying a background on the body element will apply a background for the intire page. To do this, we will be using the background-image property, to use a image as a background. The below example shows how to do that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>backgrounds in css</title>
    <style type="text/css">
    body {
     background-image: url("background.jpg");
    }
    </style>
  </head>

  <body>
    <h1>Change the Background using CSS.</h1>
    <p>apply a background using css.</p>
  </body>

</html>

Note. The above example is using embedded CSS, its recommended to use External CSS.

Repeating the Background

Through the use of the Background-repeat Property, you will either be able to repeat the image Horizontally (repeat-x) or Vertically (repeat-y), you can also disable the repeating (no-repeat).

body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}

The default setting is repeat, which repeats the image in both diractions.

Locking the Background

We can also lock the Background-image so it appears fixed doing scrolling, this is done through the use of the background-attachment property

body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
  background-attachment: fixed;
}

Background colors

Paragraphs

Most elements can have a background applied, so lets change the background color on some text.

p {
  background-color: blue;
}

Note. You should read about CSS Selectors to understand how to best apply your styles.

Background images.

Repeating the Background

Locking the Background

Background colors

Links