How to Add a Background Image to a Web Page

Using the Background-Image Property in CSS

Older woman using laptop
Robert Nicholas/OJO Images/Getty Images

If you want to get creative and put an image in the background of your Web page, you can use CSS and apply the property to the body element. With this tutorial, master this technique in just a handful of minutes.

Getting Started

In your style sheet, write:

body {
  background-image: URL;
}

In this example, replace "URL" with the actual URL of the image you would like to appear in the background.

You can use the background property in the same way if you want additional display options.

 For example:

body {
  background: URL;
}

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

  • —The background color if an image isn’t displayed
  • —Whether the image should stay in one place like a watermark (fixed) or scroll with the page (scroll)
  • —Indicates if the image should repeat infinitely on the x- and y-axes or not at all or something else.
  • —Where the background image should be placed on the page
  • —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 by taking the following steps:

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. Also, make sure that you test the tiling of repeated images. Poor tiling can make your page look really bad and you want your tiling to look seamless.  

Be sure to 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. And don't forget to optimize your background images so they don’t affect the load times of your Web pages.

Lastly, use multiple images layered on top of each other to get an even more interesting effect.

An Outdated Way of Setting a Background Image

In Web pages that are really old, you may notice 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. For that reason, I don’t recommend you use this method. Feel free to try it, however, if you're okay with this drawback. 

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Add a Background Image to a Web Page." ThoughtCo, Oct. 9, 2016, thoughtco.com/add-background-image-3467334. Kyrnin, Jennifer. (2016, October 9). How to Add a Background Image to a Web Page. Retrieved from https://www.thoughtco.com/add-background-image-3467334 Kyrnin, Jennifer. "How to Add a Background Image to a Web Page." ThoughtCo. https://www.thoughtco.com/add-background-image-3467334 (accessed December 13, 2017).