Adding Background Images

The background-image property lets you set one or more images as the background of an element. Background images are layered on top of the background color.

CSS

.hero {
  background-image: url('images/hero-bg.jpg');
}

Background Image Paths

You can use different types of paths for background images:

CSS

/* Relative path */
background-image: url('images/bg.jpg');

/* Absolute path */
background-image: url('/assets/images/bg.jpg');

/* External URL */
background-image: url('https://example.com/bg.jpg');

Background Repeat

By default, background images tile (repeat) to fill the element. Control this with background-repeat:

CSS

/* Default: repeats in both directions */
.pattern { background-repeat: repeat; }

/* Repeat horizontally only */
.border-top { background-repeat: repeat-x; }

/* Repeat vertically only */
.border-left { background-repeat: repeat-y; }

/* No repeating */
.hero { background-repeat: no-repeat; }

/* Smart spacing with no clipping */
.tile { background-repeat: space; }

/* Stretch to fit without gaps */
.seamless { background-repeat: round; }

Background Size

The background-size property controls how large the background image appears:

CSS

/* Cover: fills entire element, may crop */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
}

/* Contain: fits entire image, may leave empty space */
.logo-area {
  background-image: url('logo.png');
  background-size: contain;
}

/* Specific dimensions */
.icon { background-size: 50px 50px; }

/* Width only (height auto) */
.banner { background-size: 100% auto; }

cover vs contain

cover: The image scales to completely cover the element. Parts of the image may be cropped. Best for full-width hero sections.
contain: The image scales to fit entirely within the element. No cropping occurs, but there may be empty space. Best for logos and icons.

Background Position

Control where the background image is placed within the element using background-position:

CSS

/* Keyword values */
.top-left { background-position: top left; }
.centered { background-position: center center; }
.bottom-right { background-position: bottom right; }

/* Shorthand (single keyword centers the other axis) */
.centered { background-position: center; }

/* Pixel values (from top-left corner) */
.offset { background-position: 20px 50px; }

/* Percentage values */
.half { background-position: 50% 50%; }

/* Mix keywords and values */
.custom { background-position: right 20px bottom 10px; }

Background Attachment

The background-attachment property controls whether the background scrolls with the page or stays fixed:

CSS

/* Scrolls with the element (default) */
.normal { background-attachment: scroll; }

/* Fixed in viewport - creates parallax effect */
.parallax { background-attachment: fixed; }

/* Scrolls with element content */
.content-scroll { background-attachment: local; }

Creating a Parallax Effect

CSS

.parallax-section {
  background-image: url('landscape.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  min-height: 500px;
}

Background Origin and Clip

background-origin

Defines where the background image starts:

CSS

/* From the padding edge (default) */
.box { background-origin: padding-box; }

/* From the border edge */
.box { background-origin: border-box; }

/* From the content edge */
.box { background-origin: content-box; }

background-clip

Defines where the background is visible:

CSS

/* Visible up to the border (default) */
.box { background-clip: border-box; }

/* Visible up to the padding */
.box { background-clip: padding-box; }

/* Visible only in the content area */
.box { background-clip: content-box; }

/* Background clips to text shape */
.gradient-text {
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Multiple Background Images

CSS allows layering multiple background images on a single element:

CSS

.hero {
  background-image:
    url('overlay-pattern.png'),
    url('hero-photo.jpg');
  background-size:
    auto,
    cover;
  background-repeat:
    repeat,
    no-repeat;
  background-position:
    top left,
    center center;
}

The first image listed appears on top, and the last image is on the bottom.

The Background Shorthand

Combine all background properties into one declaration:

CSS

/* background: color image repeat position/size */
.hero {
  background: #333 url('hero.jpg') no-repeat center/cover;
}

/* Multiple backgrounds with shorthand */
.layered {
  background:
    url('top-layer.png') no-repeat top center,
    url('bottom-layer.jpg') no-repeat center/cover;
}

Practical Examples

Full-Screen Hero Section

CSS

.hero {
  background: url('hero.jpg') no-repeat center/cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Image with Color Overlay

CSS

.overlay-hero {
  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('photo.jpg') no-repeat center/cover;
  color: white;
}

Subtle Pattern Background

CSS

.textured {
  background-color: #f5f5f5;
  background-image: url('subtle-pattern.png');
  background-repeat: repeat;
}

Summary

CSS background images offer powerful control over visual backgrounds. Use background-size: cover for full-width hero images, background-position to focus on important parts of the image, and multiple backgrounds to layer effects. The background shorthand keeps your code concise, while properties like background-attachment: fixed create engaging parallax effects.