CSS background-image Property - GeeksforGeeks

11 Oct, 2021
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>
Output:
Supported Browsers: The browser supported by background-image Property are listed below: 
Google Chrome 1.0
Microsoft Edge 4.0
Firefox 1.0
Opera 3.5
Safari 1.0
shubham_singh
bhaskargeeksforgeeks
CSS-Properties
Picked
Web technologies
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills