Plan the crop around the subject

A wide photograph in a tall card needs a different crop from the same photograph in a banner. With background-size: cover, the image scales up until both dimensions of the box are filled; whatever extends past the edges is simply cut off. Start with a center position, then try left or right if the subject you actually care about sits closer to one edge then the cover will crop toward the opposite side first.

background-size: contain is the one to reach for when the whole image has to stay visible, such as a logo or a diagram. Pair it with no-repeat for a single copy; leave repeat on and the leftover space around a contained image will fill with tiled copies instead of staying empty. Test the finished background at a few different box widths, since the preview here only shows one shape, and a crop that looks right at 400px wide can crop out the subject entirely at 1200px.

A CSS background never gives its element a height on its own. The box still needs an explicit height or content that establishes one. And if the photograph is conveying information rather than decoration (a product photo, a chart, anything a screen reader user needs to know about), it belongs in an <img> tag with alt text, not a CSS background-image, which is invisible to assistive tech.

Pick a gradient or an image

Linear gradient: blends two colors along a straight line at a given angle. Negative angles wrap around the circle, so -45 degrees is the same direction as 315 degrees.
Radial gradient: blends outward from a center point you can move anywhere between 0% and 100% on each axis, useful for spotlight or vignette effects.
Image URL: loads a real photo or graphic from a relative path or an absolute address, with an optional color overlay painted on top. The address has to be reachable from wherever this page is running for the preview to render. A path that resolves fine on your own site may 404 here.

Gradient stop positions aren't locked to 0–100%; pushing a stop below 0% or above 100% pulls the color transition off-screen, which is a quick way to get a subtler blend. Gradient colors here are six-digit HEX; the image overlay uses its own opacity value from 0 to 1, independent of anything set on the gradient tab.

Fit the image, then layer the overlay on top

background-size: cover fills the box and crops what doesn't fit; contain keeps the entire image on screen and may leave empty space around it; auto renders the image at its native resolution. background-position decides where the visible part is anchored, and background-repeat decides whether it tiles when it's smaller than the box.

The overlay color is declared before the image URL in the generated CSS, so it paints as a layer above the photo rather than behind it. This is what makes it darken or tint the image instead of getting hidden by it. A common starting point for a dark overlay is #020617 at roughly 0.4 opacity; always check any text sitting on top against the actual image, not just the overlay color in isolation, since busy photos can still swallow light text even under a dark tint.

The exported CSS keeps background-image, background-size, background-position, and background-repeat as separate declarations rather than the shorthand background property, so each one can be overridden independently later. Note that one size value applies to every layer in the stack, you can't set cover for the overlay and contain for the image underneath it.

When the background doesn't look right

No image shows up at all: Open the image address in a new browser tab on its own. A relative path that resolves correctly inside your actual project may not resolve here, since relative URLs in an external stylesheet are relative to the stylesheet's own location, not the HTML page that loads it.
The box is just a flat color, no photo: Turn the overlay opacity down. At 1.0, the overlay is fully opaque and sits completely over the image. No amount of repositioning the image will bring it back through.
The gradient looks like a hard edge instead of a blend: Move the two stop percentages further apart. Identical stop values collapse the transition into a sharp line, and stops pushed outside the 0–100% range can leave only a sliver of the blend inside the visible box.
The image repeats when it shouldn't: Set repeat to no-repeat. Repeat defaults to tiling in both directions whenever the image is smaller than its container, which is easy to miss when the source image happens to be roughly the same size as the preview box but not the real element.

One more thing to check once this is in a real stylesheet: a later, broader background shorthand rule elsewhere in your CSS will silently reset image, size, position, and repeat all at once if it has higher specificity or comes later in the cascade. To be clear about what this tool actually produces, the output references the image by URL; it doesn't fetch, optimize, or bundle the file into your project.