How to Style a Background Image with CSS

This image could become a page background.

The CSS background-image property can add style, color and design elements to an entire web page or to a small part of a web page. Here's how you achieve it.

Difficulty:

Moderately Challenging

Instructions

Things You'll Need

• An existing or planned website
• Some basic knowledge of CSS stylesheets
• Background images
• A basic text editor. An HTML editing program such as Dreamweaver can be used but isn't absolutely necessary.
• An image editing program such as Photshop, Fireworks or Paint Shop Pro.
• A small image meant for the element you want to have a background-image.

Add a Background Image to an Entire Web Page

1. Save a low opacity, less saturated copy of your page background image. The page background should be unobtrusive and not interfere with the contents of the page.

2. A background can repeat or be set to no-repeat. To make a whole page background of the bales of hay shown above, the best choice is no-repeat. For a whole page background, a large image that is centered both horizontally and vertically on the page with background-position works well.

3. A browser display of the CSS rule in Step 3.

   Apply the rule to the body selector to create a whole page background. Here's an example using the settings suggested in Step 2.

   body {
   background-image: url(somebg.jpg);
   background-repeat: repeat;
   background-position: center center;
   }

4. Adjust the background-position according to your image. For example:

   background-position: left top;

   might be a better choice for some images. That rule places the image horizontally on the left, and vertically at the top.

Add a Background Image to an Individual Web Page Element

1. With CSS, anything can have a background image: a list, a div, a paragraph, a heading a span. Anything.

2. Depending on what element you choose for a background image, it can be used as a design element, a navigation aid, to bring contrast or attention to the element or to define a part of a page.

3. A small section of the hay field can be used as a background for a page element

   Use your image editing program to create an image based on your needs and purposes as suggested in Step 2. As an example, here is a small bit of the hay field from the large image.

4. In a browser, the h1 would look like this.

   As an example, the image will be used as a background for an h1 element. Here's a possible CSS rule:

   h1 {
   background-image: url(h1bg.jpg);
   background-repeat: repeat;
   background-position: center center;
   }

Tips & Warnings

• A whole-page background image that does not repeat must be very large, since some monitors can display over 2,000 pixels in width.

• A very small image can be used as a page background if it is set to repeat.

• A background image can repeat only horizontally or only vertically using either background-repeat: repeat-x; or background-repeat: repeat-y; rules.

• Many other CSS rules can be added to the h1 selector, such as width, font-size, border, padding and so on.

• A large background image may take a long time to download.