CSS - background-image Property

Quiz

The background-image property of CSS allows the setting of one or more background images for an element. The image url can be specified and be combined with other properties of the background to make it visually appealing.

Syntax

background-image: url('url') | none | initial | inherit;

Property Values

Value	Description
url	This specifies the url of the required image.For multiple images comma separated urls have to be provided.
nope	This specifies that no image must be displayed. Default value.
linear-gradient()	This sets the linear-gradient background-image that is defined at least 2 color from the top to the bottom.
radial-gradient()	This sets the radial-gradient background-image that is defined at least 2 color from the center to the edge.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Image Property

Below are described some examples of the background-image property using different values.

Setting an Image as Background

The background of an image can be set by specifying the url of the required image.In the following example, the url of a flower image has been used.

Example

   <!DOCTYPE html>
   <html>
   
   <head>
       <style>
           .background-img {
               background-image: url('/https/www.tutorialspoint.com/css/images/pink-flower.jpg');
               background-repeat: no-repeat;
               width: 400px;
               height: 400px;
               position: relative;
               border: 5px solid black;
               color: white;
           }
       </style>
   </head>
   
   <body>
       <h2>CSS background-image property</h2>
       <div class="background-img">Image</div>
   </body>
   
   </html>

Multiple Images as Background

If multiple images are to be used, then the url's of the images are to be specified in the url() with comma separated values.In the following example, two different images have been used which are stacked over each other.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .multiple-images {
            background-image: url('/https/www.tutorialspoint.com/css/images/logo.png'),
                              url('/https/www.tutorialspoint.com/css/images/white-flower.jpg');
            background-repeat: no-repeat;
            width: 800px;
            height: 700px;
            position: relative;
            border: 5px solid black;
            color: white;
        }
    </style>
</head>

<body>
    <h2>CSS background-image property</h2>
    <div class="multiple-images"></div>
</body>

</html>

Color Transisitions in Background

The background of an image can also be set using linear-gradient.The color transition occurs in a straight line in the specified direction.This is demonstrated in the example below.

Here, we defined the direction of the gradient 'bottom' and then the starting and ending colors 'yellow' and 'green'.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .linear-gradient {
            background-image: linear-gradient(to bottom, yellow, green);
            background-repeat: no-repeat;
            background-position: center;
            width: 400px;
            height: 400px;
            position: relative;
            border: 5px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS background image property</h2>
    <div class="linear-gradient">
      Background image with linear gradient</div>
</body>

</html>

Supported Browsers

Property
background-image	1.0	4.0	1.0	1.0	3.0

css_reference.htm

Print Page