CSS background-image Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The background-image property in CSS is used to set one or more images as the background of an element. These images can dramatically influence the visual presentation of a web page, allowing designers to create textured, patterned, or photographic backdrops without adding extra HTML elements. Unlike content images placed in <img> tags, background images are purely decorative by default, meaning they do not carry semantic meaning and are not part of the document’s content flow. This distinction is important for accessibility, as screen readers typically ignore background images, emphasizing the need for meaningful alternative text in HTML when conveying information visually.

One of the powerful aspects of background-image is its ability to layer multiple images. When multiple images are specified, they are stacked in order, with the first image listed appearing on top. This capability allows for complex visual effects, such as overlaying textures over a photograph or combining gradient images with decorative patterns. To control the positioning and repetition of these layers, the property is often used in conjunction with other background-related properties such as background-repeat and background-position. These properties provide fine control over how each image is displayed, whether it should repeat to fill the space, or be positioned precisely within the container.

Background images also interact with CSS layout and sizing in significant ways. The property does not affect the element’s size or layout directly; instead, the image is painted behind the element’s content, meaning elements like text, borders, and padding are displayed on top. For responsive design, background images can be combined with properties like background-size to scale or fit images dynamically within their container. This allows designers to create visually engaging layouts that adapt to different screen sizes without sacrificing image quality or disrupting the content structure. Additionally, background images can work with transparency, gradients, and CSS blend modes to create advanced visual effects, enhancing the creative flexibility of modern web design.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: As specified, but with URIs made absolute
Animatable: No
JavaScript syntax: object.style.backgroundImage

Interactive Demo

background-image: url("images/sun.png");

background-image: url("images/sun.png"),
                  url("images/tick.png");

background-image: url("images/tick.png"),
                  url("images/sun.png");

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("images/sun.png");

Syntax

background-image: <bg-image> [ , <bg-image> ]*

Values

<bg-image> = <image> | none

<image>Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
noneColor of the next parent through which the background is visible.
inherit

Example

HTML

<div class='hero'>

  <div class='content'>

    <h1>Sunset Over Ocean</h1>

    <p>Example of background-image with gradient overlay and cover sizing.</p>

    <a class='btn' href='#'>Learn More</a>

  </div>

</div>

CSS

/* Simple reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hero {
  height: 60vh;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;

  /* Multiple backgrounds: gradient overlay + image */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1650&q=80');

  /* common background settings */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #223344; /* fallback color */
}

.content {
  text-align: center;
  padding: 2rem;
}

.content h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.content p {
  font-size: 1rem;
  opacity: 0.95;
}

.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background-image property. Hover over a browser icon to see the version that first introduced support for this CSS property.