Which property is used to set the background image of an element using CSS ?

Last Updated : 25 Jun, 2022

In this article, we will see the property used for setting the background image of an element in CSS. The background image can be set using the background-image property that is used to set one or more background images for an element. By default, it places the image in the top left corner. To specify two or more images, we need to specify the separate URLs with a comma for both images.

Syntax:

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

Example1: This example illustrates the background-image property by setting the URL value.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        background-image property 
    </title> 
    <style> 
        body { 
            background-image: url( 
    "https://media.geeksforgeeks.org/wp-content/uploads/20220617064350/color.jpg"); 
            text-align: center; 
        } 
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Setting the Background-image for an element</h3>  
</body> 
</html>

Output:

Example 2: This example illustrates the background-image property by setting the URL value with the initial that sets the property to its default value.

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; 
            text-align: center; 
        } 
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h3> 
            Setting the Background-image for an element 
        </h3> 
        <h3> 
            CSS background-image:"url" initial; 
        </h3>  
    </center> 
</body> 
</html>