1. Technology

How do I add a background image to a web page?


Older woman using laptop
Robert Nicholas/OJO Images/Getty Images
Question: How do I add a background image to a web page?

If you want to put an image in the background of your web page, you should use CSS and apply the background-image property to the BODY element. In your style sheet, write:

body {
  background-image: URL;

The URL is the location of the image you want in the background.

You can use the background property in the same way:

body {
  background: URL;

The advantage of using the background property is that you can define other aspects of how you want the image to display including:

  • background-color—The background color if an image isn’t displayed
  • background-attachment—Whether the image should stay in one place like a watermark (fixed) or scroll with the page (scroll)
  • background-repeat—Indicates if the image should repeat infinitely on the x- and y-axes or not at all or something else.
  • background-position—Where the background image should be placed on the page
  • background-size—Sets the size of the background image
  • background-clip and background-origin—Indicates how a background image should be modified to display on the page

You can define all of these in the background style property like this:

body {
  background: background-color URL background-position / background-size background-repeat background-attachment background-origin background-clip

You don’t have to use all of the styles in your background property. Any that are left off are set to the default. So, for example, if you wanted to use a picture of a dog as a non-repeating background image, you would write:

background: url("images/dog.jpg") no-repeat;

And if you wanted that dog positioned in the bottom right corner you would write:

background: url("images/dog.jpg") bottom right no-repeat;

Tips for Using Background Images Well

  • After you upload your image, be sure to check the URL to make sure it’s on your server and that you know the correct URL
  • Make sure that you test the tiling of repeated images. Poor tiling can make your page look really bad. (How to Make a Seamless Tile)
  • Check that your images are not too busy, dark, or make the text unreadable. A background image that overpowers the page contents will drive readers away.
  • Be sure to optimize your background images so they don’t impact the load times of your pages.
  • Use multiple images layered on top of each other to get an even more interesting effect.

An Outdated Way of Setting a Background Image

You may notice in web pages that are really old the background attribute on the BODY element. While most browsers still support this obsolete attribute, it doesn’t give you any control over the background image beyond the image itself. I don’t recommend you use this method.

©2014 About.com. All rights reserved.