How to Style a Background Image with CSS
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;
}
-
1
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.
Related Searches
Comments
-
lucies
May 28, 2010
I've looked everywhere on how to do this and none of their instructions worked until I found this site! Thank you Virginia! -
mymukki
Aug 07, 2009
this will certainly improve a lot of sites!