View video tutorial
CSS Background Image
CSS
The background-image property specifies an image to use as an element's background.
CSS background-image property.
➔ The background-image property is used to set an image to the background of an element.
Syntax
background-image: url() | none | initial | inherit;
Property values
| Value | Description |
|---|---|
| url() | url(): Specifies the path to an image file (e.g url('myimage.png')). Multiple images can be specified using commas (e.g url('myimage.png'), url('myimage2.png')). |
| none | No background image will be displayed.The is default. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
<div style="background-image:url('resources/images/mountains-m11.jpg');border-radius: 5px; padding:10px;">
<h1>CSS background-image Example</h1>
<p>The CSS background property is used to set the background effect on the element.</p>
<p>The following are CSS background properties that affect HTML elements.</p>
</div>Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background-image Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
div {
border-radius: 10px;
padding: 10px;
background-image: url('resources/images/mountains-m11.jpg');
min-height: 450px;
}
</style>
</head>
<body>
<div>
<h1>CSS background-image Example</h1>
<p>The CSS background property is used to set the background effect on the element.</p>
<p>The following are CSS background properties that affect HTML elements.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example
<body style="background-image:url('resources/images/mountains-m11.jpg');">
<div style="border-radius: 5px; padding:10px;">
<h1>CSS background-image Example</h1>
<p>The CSS background property is used to set the background effect on the element.</p>
<p>The following are CSS background properties that affect HTML elements.</p>
</div>
</body>Click on the "Try it Now" button to see how it works.
Note: By default, the image is repeated if it cannot cover the entire element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background-image Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
div {
background-image: url("resources/images/flowers-orchid-t.png");
border-radius: 5px;
padding: 10px;
min-height:230px;
}
</style>
</head>
<body>
<div>
<h1>CSS background-image Example</h1>
<p>The CSS background property is used to set the background effect on the element.</p>
<p>The following are CSS background properties that affect HTML elements.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.