Make sure the right files are in the right places.

  1. All files should be in a folder
  2. CSS files should be in a folder named css
  3. image files should be in a folder named images
  4. The HTML files just sit in the main containing folder.
Make sure the right files are in the right places.

Add a link in your HTML file to the CSS file

Because your .css file should be in the css folder you need to start the href with css/ to tell the browser to go to the css folder first. Then the name of the file comes next

Add a background-image rule

The only trick to remember here is that in the url() you have to add the path from the CSS file to the image. To move up out of the css folder you use ../ Here is how the example below breaks down the url of ../images/dog-square.jpg

  1. ../ this says to move out of the css folder
  2. images/ this says to look in the images folder
  3. dog-square.jpg this says to use the dog-square.jpg file

If you use this folder structure then all of your background images will start with ../images/

The Result

This is how the result looks. If you want a tiled (the image repeats) background you can stop here.

But sometimes you want a bit more control. if so, read on.

Stopping the Image from Repeating

add a background-repeat:no-repeat; rule to stop the image from repeating.

Fixing the image in one spot

Sometimes you want to keep the imaged fixed to one spot and not scroll with the page. To do that use:

background-attachment: fixed;

Fixing the image in one spot

Set the Background position on the page

You can also set the position of the image. You can either use pixel values or keyword ltop, left, bottom, right, center.

Below is center
background-position: center;

For more details on all you can do visit:
http://reference.sitepoint.com/css/background-position

Set the Background position on the page