Skip to main content

The background-image Property

The CSS background-image property is used to set one or more images as the background of an element. Unlike the <img> tag, background images are purely presentational and do not affect the document's structure or layout.

The background image sits on top of the background-color (if defined) and underneath the element's content.


Syntax: Using url()​

To set a background image, you use the url() function, which points to the location of the image file.

The Syntax​

styles.css
selector {
  background-image: url('path/to/image.jpg');
}
  • url(): The function used to specify the file path.
  • Path: Can be a relative path (from the CSS file) or an absolute URL (starting with http://). Quotes ('' or "") around the URL are optional but recommended.

Example​

styles.css
.hero-banner {
  /* Sets a fallback solid color first */
  background-color: #333; 
  /* Sets the image */
  background-image: url('../img/mountains.jpg');
  min-height: 400px;
}
Image vs. Color

If both background-color and background-image are defined, the image will be placed on top of the solid color. If the image is transparent or fails to load, the background color serves as a visual fallback.


Using Gradients​

CSS gradients are also considered background images and are defined using the background-image property.

Example: Linear Gradient​

styles.css
.gradient-bar {
  background-image: linear-gradient(to right, #007bff, #28a745);
}
http://127.0.0.1:5500/index.html

Multiple Background Images​

You can assign multiple images to a single element by listing them, separated by commas.

The images are stacked one on top of the other, with the first image listed being the top-most layer.

The Syntax​

styles.css
selector {
  background-image: url('top-layer.png'), url('bottom-layer.jpg');
}

Example: Applying a Noise Texture Over a Main Image​

To place a noise texture on top of a background photo, include the texture image first so it sits on the upper layer:

Code (CSS / HTML)​

.box {
  width: 100%;
  height: 400px;

  /* Noise texture first, main image second */
  background-image: url('/tutorial/img/tutorials/css/noise-pattern.png'),
                    url('/tutorial/img/tutorials/css/cityscape.jpg');

  /* Control sizing for each background layer */
  background-size: cover, cover;

  /* Prevent repetition */
  background-repeat: no-repeat, no-repeat;

  /* Center both images */
  background-position: center, center;

  /* Blend both layers together */
  background-blend-mode: overlay; /* multiply, screen, soft-light also work */
}

Output (Preview Browser Window)​

http://127.0.0.1:5500/index.html
Controlling Multiple Images

When using multiple background-image values, you must provide a matching set of values for the related properties (like background-repeat, background-position, and background-size) in the same order.


The background Shorthand​

The background property is the ultimate shorthand for all background-related properties, including background-image.

Shorthand Example​

styles.css
/* background: [color] [image] [repeat] [position] / [size] */
.hero-section {
  background: #333 url('../img/hero.jpg') no-repeat center / cover;
}
http://127.0.0.1:5500/index.html

Interactive background-image Demo​

Use the live editor to change the URL or apply a gradient instead of an image.