background-image

The background-image property sets an image as background. You can use URL images, gradients, or combinations. Background images don't affect layout like img elements do.

Background Image Syntax

CSS

/* Image URL */
.element {
  background-image: url('image.jpg');
}

/* Gradient background */
.element {
  background-image: linear-gradient(to right, blue, red);
}

/* Multiple backgrounds */
.element {
  background-image: 
    url('overlay.png'),
    linear-gradient(to right, blue, red);
}

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

Common Patterns

CSS

/* Hero image with overlay */
.hero {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                    url('hero.jpg');
  background-size: cover;
  background-position: center;
  height: 400px;
}

/* Pattern background */
.pattern {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,0.1) 10px,
    rgba(0,0,0,0.1) 20px
  );
}

/* Icon background */
.icon {
  background-image: url('icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}

Note

Background-image sets image or gradient as background. Doesn't affect layout. Pair with background-size and background-position for control.

Background sizing: [background-size & background-position](/css/background-size).