CSS background-image Property

The background-image property is used to set one or more background images for an element. By default, it places the image on the top left corner. To specify two or more images, we need to specify the separate URLs with a comma for both images.

Syntax:

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

Property values:

url(‘url’): This specifies the URL of the image. In order to specify the URL of more than one image then separate the URLs using a comma.
none: This is the default case where no image can be displayed.
initial: It is used to set the property to its default value.
inherit: It inherits the property from its parent element.

The background-image property can also be used with the following values:

linear-gradient(): It is used to set the linear-gradient background-image that is defined at least 2 color from top to bottom.
radial-gradient(): It is used to set the radial-gradient background-image that is defined at least 2 color from center to edge.

We will utilize the above property values & understand them through the examples.

url(‘url’): When the background-image has an URL.

Syntax:

background-image: url('url')

Example 1: This example illustrates the background-image property by setting the url value as url.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>background-image property</title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png");
    }
     
    h1,
    h3 {
        color: green;
    }
     
    body {
        text-align: center;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>background-image:url;</h3>
    <div>
      GeeksforGeeks: A computer science portal for geeks
    </div>
</body>
</html>

Output:

none: This property is used for setting no background image & will not be displayed anything and this is by default property.

Syntax:

background-image: url('url') none

Example 2: This example illustrates the background-image property by setting the url value as none.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>background-image property</title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png") none;
    }
     
    h1,
    h3 {
        color: green;
    }
     
    body {
        text-align: center;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>background-image:url none;</h3>
    <div>
      GeeksforGeeks: A computer science portal for geeks
    </div>
</body>
</html>

Output:

initial: It sets the property to its default value.

Syntax:

background-image: url('url') initial;

Example 3: This example illustrates the background-image property by setting the url value as initial.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS background-image property</title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png") initial;
    }
     
    h1,
    h3 {
        color: green;
    }
     
    body {
        text-align: center;
    }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>CSS background-image:url initial;</h3>
   </center>
</body>
</html>