The background-image property sets one or more images as an element's background, layered behind its content and, by default, tiled to repeat and fill the element's box.

Syntax

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

Deep Dive Course

background-image accepts a url() pointing to an image file, or a CSS gradient function like linear-gradient() or radial-gradient() generating a background without needing an actual image file at all. Multiple backgrounds can be layered by separating several values with commas, with the first listed rendering on top and later ones behind it; by default, an image repeats, or tiles, in both directions to fill the element's entire box, a behavior controlled separately by background-repeat, and background-image alone doesn't automatically scale the image to fit the element, which is background-size's job instead.

1Understanding Background-image

💡

Always pair background-image with a background-color fallback for text-containing elements, so text remains legible even if the image fails to load, is still loading, or the element's background color needs to show through any transparent parts of the image.

editor.html

.hero {
  background-image: url("hero.jpg");
  background-color: #333;
}

localhost:3000

2Practical Example

Here is a real-world application of Background-image showing how it is used in production CSS code.

editor.html

.banner {
  background-image: linear-gradient(to right, #4facfe, #00f2fe);
}

localhost:3000

3Best Practices

Follow these guidelines when working with Background-image:

1. Set a fallback background-color alongside background-image, so content remains legible if the image fails to load or has transparent regions

2. Combine background-image with background-size and background-position for full control over how the image fits and is positioned within the element

3. Use a CSS gradient function directly in background-image, rather than an actual image file, for simple gradients, avoiding an unnecessary image request

⚠️

Tip: Always pair background-image with a background-color fallback for text-containing elements, so text remains legible even if the image fails to load, is still loading, or the element's background color needs to show through any transparent parts of the image.

editor.html

.hero {
  background-image: url("hero.jpg");
  background-color: #333;
}

localhost:3000

Examples

Example 01Basic Usage

.hero {
  background-image: url("hero.jpg");
  background-color: #333;
}

Example 02Advanced Example

.banner {
  background-image: linear-gradient(to right, #4facfe, #00f2fe);
}

Best Practices

Set a fallback background-color alongside background-image, so content remains legible if the image fails to load or has transparent regions
Combine background-image with background-size and background-position for full control over how the image fits and is positioned within the element
Use a CSS gradient function directly in background-image, rather than an actual image file, for simple gradients, avoiding an unnecessary image request

Interview Question

Why does an image set with background-image often appear tiled, repeated multiple times, across an element by default, rather than appearing just once?▼

Hint: Think about background-repeat's default value, and whether background-image alone controls that repeating behavior.

background-image only specifies which image, or gradient, to use as the background, it has no control at all over how that image is sized or whether it repeats — that behavior is governed by the separate background-repeat property, whose default value is repeat, meaning the image tiles both horizontally and vertically to completely fill the element's background area whenever the image itself is smaller than that area. This default tiling behavior made more sense historically, when background-image was commonly used with small, seamless pattern textures specifically designed to repeat, but it frequently surprises developers today trying to use a single, larger photograph as a background, only to see it repeated in a confusing grid. Achieving a single, non-repeating background image requires explicitly setting background-repeat: no-repeat alongside background-image, since the repeating behavior is never automatically inferred from the image's own size relative to the element.

Exercises

MediumPractice using Background-image in a real scenario.

View Solution

.hero {
  background-image: url("hero.jpg");
  background-color: #333;
}

Frequently Asked Questions

Why does an image set with background-image often appear tiled, repeated multiple times, across an element by default, rather than appearing just once?▼

Related Functions

Background-repeatBackground-sizeBackground-position