CSS Background Image Generator

Build background-image CSS with size, position, repeat, and a gradient overlay.

Presets:

Hero cover
Contain
Tiled pattern
Parallax

Overlay start opacity

55%

Overlay end opacity

10%

Overlay angle

180°

min-height (0 = none)

320px

Used in the generated code, e.g. .hero

Hero heading

CSS
.hero {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1)), url("image.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  min-height: 320px;
}
CSS shorthand
.hero {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1)), url("image.jpg") center center / cover no-repeat scroll;
}

CSS Background Image Generator

Create the CSS for hero sections, banners, and cards without guessing property values. Paste an image URL – or preview a picture from your computer, which never leaves your browser – and adjust size, position, repeat, attachment, blend mode, and an optional gradient overlay. The preview updates live and the generator outputs both the long-hand properties and the one-line background shorthand.

The properties explained

  • background-size: cover scales the image until it fills the whole box; parts may be cropped. Ideal for hero images.
  • background-size: contain shows the entire image; empty space may remain. Good for logos and illustrations.
  • background-position decides which part stays visible when the image is cropped. center center is the safe default; center top keeps faces and skylines in view.
  • background-repeat tiles the image. Use repeat with a custom size for patterns, no-repeat for photos.
  • background-attachment: fixed keeps the image still while the page scrolls, creating a simple parallax effect. Mobile Safari ignores it, so treat it as an enhancement.
  • background-blend-mode blends the overlay color into the photo, for example multiply for a duotone look.

Why use a gradient overlay?

White text on a busy photo is hard to read. The overlay adds a linear-gradient layer on top of the image in the same background-image declaration, for example from 55% black at the top to 10% at the bottom. Because CSS draws the first layer on top, the gradient sits above the picture without any extra HTML element.

.hero {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1)), url("hero.jpg");
  background-size: cover;
}

Performance tips

Compress large photos, serve modern formats like WebP or AVIF, and set a background-color close to the image's main color so the section does not flash white while the file loads. To embed a small image directly in CSS, convert it with Image to Base64.

Frequently Asked Questions

cover fills the entire element and crops whatever does not fit, while contain shows the whole image and may leave empty bands. Use cover for photos and contain for logos or illustrations.

No. "Preview a local image" creates a temporary browser URL so you can see the effect. The file stays on your device and the CSS uses only its file name.

Enable the gradient overlay. It adds a linear-gradient layer before the url() in background-image, so the semi-transparent color is drawn over the photo without extra markup.

iOS Safari and some mobile browsers ignore fixed backgrounds for performance reasons and fall back to scroll. The page still works; only the parallax effect is missing.