CSS background-image Property

CSS background-image

The background-image property in CSS is used to set one or more background images for an element. You can provide the URL of the image, or use none to remove any background images. It allows you to customize the appearance of elements using images as their backgrounds.

Syntax of background-image

</>

Copy

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

Values

Value	Description
`url('path_to_image')`	Specifies the path to the image to be used as a background.
`none`	No background image will be applied. This is the default value.
`initial`	Sets the property to its default value (`none`).
`inherit`	Inherits the background image value from the parent element.

Default Value

none

Examples for background-image

Using the CSS background-image Property

The following examples demonstrate how to use the background-image property with different values.

</>

Copy

/* Applying a background image */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
}

/* Removing the background image */
.element {
  background-image: none;
}

/* Inheriting the background image from the parent */
.element {
  background-image: inherit;
}

Example for Applying a Background Image

Below is an example demonstrating how to apply a background image using the background-image property:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
<h1>Background Image Example</h1>
<div class="box">Background Image Example</div>
</body>
</html>

Browser Support

The background-image property is supported in all modern browsers. Below is a compatibility table:

Browser	Version
Chrome	1.0
Edge	4.0
Firefox	1.0
Safari	1.0
Opera	3.5

TutorialKart

CSS background-image Property