CSS background size and position: crop decoration deliberately

When to use it

A case dashboard header uses an abstract texture that carries no information. Give the header an opaque base color, prevent repetition, and use cover only because cropping cannot remove required meaning. Center positioning may be wrong if the visual focal point sits off-center, so inspect both wide and narrow headers. If the image were a photograph of evidence, it should be an HTML image with text alternative and sizing appropriate to that evidence, not a CSS background. Avoid fetching a large asset merely to fill a narrow strip; compress and size it for actual display. Test with the image blocked and in forced colors to ensure the heading remains readable.

.case-header { color: #f7fafc; background-color: #173148; background-image: url("/assets/case-header-texture.webp"); background-size: cover; background-position: 62% center; background-repeat: no-repeat; padding: 2rem 1.5rem; }

Cost and verification

The image request and decoding usually cost far more than the CSS declarations. The path is illustrative and must be replaced by a real optimized asset before deployment. Cover can crop different portions as the box's aspect ratio changes; if the focal point matters, the art direction may need separate assets. A background can be omitted by print settings, so maintain contrast on the base color. Do not use contain and assume the image covers the whole header; any uncovered region shows the background color. Profile the delivered bytes before adding layered effects.

Common Mistakes

• Do not use a background image as the only carrier of evidence.
• Do not assume cover shows the entire image.
• Do not ship the illustrative asset path without a file.

Connected lessons

• CSS Property Decisions
• CSS backgrounds: reserve background images for decoration
• CSS object-fit and aspect ratio: crop a preview without distorting it
• CSS color and contrast: pair text with its real surface