The URL is the location of the image you want in the background.
You can use the
background property in the same way:
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 (
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-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:
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.