CSS Background Image

« Previous Tutorial Next Tutorial »

The background-image Property

The background-image property is used to set an image in the background of an element. It is similar to the background attribute of the body element of HTML 4.0.

In case of the background attribute, the image could only be set for the body element; whereas, using the background-image property, you can virtually set background image for all elements.

The background-image property is specified using two values either url, to specify the image, or more, when no image is used.

Some examples of using the background-image property are given in the following code fragment.

body { background-image: url("picture.jpg"); }
p { background-image: none; }

In the above code fragment, an image, picture.jpg is specified for the BODY element and no image is used for the p element of HTML. The picture.jpg image is located in the local server. If the image is located in a different server, you have to provide the complete path of the image in the Uniform Resource Locator (URL), as shown in the following code fragment.

body { background-image: url(""); }

To provide local url (image located in your pc):

body { background-image: url("file:///D:/Images/wallpaper/Waterfall.jpg"); }

When you set a background image for an element, you should also specify a background color that will be used when the image is unavailable. If the image is available, it is placed on top of the background color, and in fact the color is visible in the transparent parts of the image.

Set Background Image on Web Page

Here is an example shows how to set background image of a web page using CSS:

<!DOCTYPE html>
   <title>CSS Background Image Example</title>
      body { background-image: url("nature.jpg"); }

<h2>CSS Background Image Example</h2>
<p>This is an example on CSS background image.</p>


Here is the sample output produced by the above CSS background image example code:

CSS Background Image

Here are some other properties used to decorate background image:

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.