How to Add and Position Background Images Using CSS

The technique will allow you to set a background image as well as position it how you need it.

Steps to Adding Background Image to Your Website

Start by defining which element you want to add the background image on.

For the example, I plan to add an image to the whole websites background, which is why I used the element ‘body’.

body {
  background:#FFFFFF url(http://yoursite.com/image.jpg);
}

Now to make this work, you must have the following:

1. Make sure you upload your image to your web server
2. Get the URL of the image file placed

Position of the Background Image

When it comes to positioning the image, you have a few options.

1. This will repeat the image across the whole background of your website.

body {
  background:#FFFFFF url(http://yoursite.com/image.jpg) repeat;
}

2. This will stop the image from repeating more than once.

body {
  background:#FFFFFF url(http://yoursite.com/image.jpg) no-repeat;
}

3. This will repeat the image across the X axis.

body {
  background:#FFFFFF url(http://yoursite.com/image.jpg) repeat-x;
}

4. This will repeat the image across the Y axis.

body {
  background:#FFFFFF url(http://yoursite.com/image.jpg) repeat-y;
}

You can also

5. Lastly, You can decide which part of the screen these actions accrue.

background:#FFFFFF url(http://yoursite.com/image.jpg) repeat right;
background:#FFFFFF url(http://yoursite.com/image.jpg) repeat left;
background:#FFFFFF url(http://yoursite.com/image.jpg) repeat top;
background:#FFFFFF url(http://yoursite.com/image.jpg) repeat bottom;
background:#FFFFFF url(http://yoursite.com/image.jpg) repeat bottom right;
background:#FFFFFF url(http://yoursite.com/image.jpg) repeat top left;

You get the point. By adding a simple positioning tag to your background element you can move the image around.

Browser Support

This method has been tested in Firefox, IE 6, 7,Safari and Opera.

Conclusion

The code used is the standard technique for adding and positioning a background image to your website.