background-image

The background-image property sets the background image to the element. By default the image will be “repeating”, but you can override this behavior with the background-repeat property.

Initial Value none
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation discrete

The background-image property specifies one or more images for the background of an element. The browser will always assume the first image specification as the foremost image, with any additional images trickling down in a sequence; behind the first image.

If background-color is also set, it will be positioned behind the background image. In other words, the background color will not appear on the screen in the area where the background image is displayed.

That said, it is typically a good idea to specify the background color regardless. For example, if the image doesn’t load for whatever reason, the background will have an alternative color as a placeholder.

This property is also used when applying a gradient to the background. This is because gradients are treated as images and cannot be specified with background-color.

Syntax

/* Keyword value */

background-image: none;

/* URL */

background-image: url(../path/to/image.png);

/* Gradients */

background-image: linear-gradient(#f3f3f3, #392a5b);
background-image: radial-gradient(to right, rgba(34,39,46,1), rgba(255,255,255,.5));

/* Image + Gradient */

background-image: linear-gradient(#f3f3f3, #392a5b);, url(../path/to/image.png);

/* Global values */

background-image: inherit;
background-image: initial;
background-image: revert;
background-image: unset;

Description

valuewhat it does
url()Image URL. You must specify URLs separated by commas to define multiple background images.
linear-gradient()Sets a linear gradient as the background image. Identify at least two colors (from top to bottom).
radial-gradient()Sets a radial gradient as the background image. Define at least two colors (center to edge).
repeating-linear-gradient()Repeats a linear gradient.
repeating-radial-gradient()Repeats a radial gradient.
conic-gradient()Specifies a gradient that rotates around the center.
cross-fade()Combine multiple images with specified transparency.
noneDefault value. Do not display the background image.
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

This simple example uses background-image: url(); and a text overlay.

a simple background image

 

The following example highlights the direction in which colors and gradients can go.

This is an interactive container where you can try out the linear-gradient value.

You can select the gradient shape, as well as two colors (to be mixed together) down below to see what it looks like.

background-image: linear-gradient( , , );
 

And you can also use background-image for animation projects.

CSSHTML
.animated-bg-img {
    height: 30rem;
    background-image: url(https://c6c8j7x5.rocketcdn.me/wp-content/uploads/2022/10/CSS-Ref-Ftrd-768x512.png), url(https://c6c8j7x5.rocketcdn.me/wp-content/uploads/2022/10/photoholgic-RGvwatYi0-Q-unsplash.jpg);
    background-position: 20px -90px, 0px 500px;
    background-repeat: no-repeat, no-repeat;
    background-size: 250px, 1200px;
}

@keyframes spaceAnimation {
    from { background-position: 20px 20px, 0 0; }
    to { background-position: 10px -90px, 100% 0; }
}
    
.animated-bg-img { 
    animation: spaceAnimation 7s linear infinite;
}
<div class="animated-bg-img"></div>