Things You'll Need:
- A small image meant for the element you want to have a background-image.
-
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. -
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 elementUse 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;
}









Comments
mymukki said
on 8/7/2009 this will certainly improve a lot of sites!