How to Style a Background Image with CSS

Contributor

By Virginia DeBolt
eHow Contributing Writer

Article Rating: (14 Ratings)

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:

A small image meant for the element you want to have a background-image.

Add a Background Image to an Entire Web Page

Step 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.
Step 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.
Step 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;
}
Step 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

Step 1

With CSS, anything can have a background image: a list, a div, a paragraph, a heading a span. Anything.
Step 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.
Step 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.
Step 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;
}