Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A CSS header image can give a page visual impact without adding another content element to the document. The usual approach is to apply background-image to the header, then control the crop with background-size and background-position.
That approach is best for decorative imagery. If the image communicates information—such as a product, chart, person, or location—use an accessible <img> with meaningful alt text instead. The implementation below covers both options, including responsive sizing, overlays, focal-point control, and common causes of distorted or missing header images.
Start with a full-bleed CSS background header
Use a background image when the header image is decoration behind a title, navigation, or call to action. A background image does not give the header any intrinsic height, so the element still needs content, padding, min-height, height, or an aspect ratio.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →<header class="site-header">
<div class="site-header__content">
<p class="eyebrow">Explore the outdoors</p>
<h1>Plan your next adventure</h1>
<a class="button" href="/guides">Browse guides</a>
</div>
</header>.site-header {
min-height: 20rem;
display: grid;
align-items: center;
background-image: url("/images/header.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.site-header__content {
width: min(90% - 2rem, 72rem);
margin-inline: auto;
padding-block: 4rem;
}background-size: cover fills the entire header while preserving the image’s aspect ratio. It can crop part of the image, which is usually what you want for a full-width hero. The header’s content and padding also help prevent the image area from collapsing.
#1 Best Overall
- Premium Quality Prints: Printed on high-grade satin luster photo paper with high-quality ink for sharp details and vibrant colors, carefully packaged in durable tubes for protection during shipping.
- Enhanced Image Quality: Printed using advanced technology to improve clarity, optimize color and contrast, and reduce distortions for high-quality, vibrant prints.
- Easy and Fast Customization: Simply upload your image to create a high-quality personalized poster, ideal for décor, memories, or signage. Ready for framing or mounting.
- Perfect for Any Occasion: Suitable for home decor, gifts, events, or milestones, these custom prints are designed to add a personal touch with quality craftsmanship and style.
- Made in the USA
Choose the right image-sizing rule
| Value | Result | Use it when |
|---|---|---|
cover |
Fills the box and preserves the aspect ratio; edges may be clipped. | You want a full-bleed hero or decorative banner. |
contain |
Displays the complete image; empty space may remain. | Showing the entire logo, illustration, or product image matters. |
100% 100% |
Forces width and height independently and can distort the image. | Almost never for photographic headers. |
Do not assume that cover displays the whole image. It intentionally permits clipping. Use contain when showing the complete image is more important than filling the header.
Control the crop with background-position
When a header looks fine on desktop but cuts off a person or product on a phone, the problem is usually the focal point—not the image itself. background-position controls which part of the cropped image remains visible.
.site-header {
background-position: 50% 30%;
}The first value controls the horizontal position and the second controls the vertical position. For example:
center centerkeeps the center visible.left centerkeeps the left side visible.70% 25%favors a subject positioned toward the right and upper portion of the image.
There is no guarantee that center preserves the important subject at every viewport width. Test narrow screens and adjust the position for the actual composition of the image.
Add readable text with an overlay
White text over a photograph can become unreadable when the crop changes or the background contains bright areas. A gradient overlay improves contrast without permanently editing the source image.
.site-header {
min-height: 20rem;
display: grid;
align-items: center;
color: white;
background:
linear-gradient(
90deg,
rgb(0 0 0 / 0.72),
rgb(0 0 0 / 0.18)
),
url("/images/header.webp") center / cover no-repeat;
}This creates a stronger darkening effect on the left, where the heading is expected to sit. For centered text, use a more even overlay:
Rank #2
- CUSTOMIZATION: Transform your favorite photos and images into stunning wall art with our personalized poster printing service
- VERSATILE DISPLAY: Perfect for decorating living rooms, bedrooms, offices, or any space that needs a personal touch with your memories
- SIMPLE PROCESS: Easy upload system lets you submit your chosen images and customize the final appearance of your poster
- QUALITY PRINTING: High-resolution printing technology ensures sharp, vivid reproduction of your photos with excellent color accuracy
- PERSONAL MEMORIES: Create meaningful wall decor from wedding photos, family portraits, vacation snapshots, or artistic images
.site-header {
background:
linear-gradient(rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.42)),
url("/images/header.webp") center / cover no-repeat;
}Check the result at different widths and with long headings. A visually attractive overlay is not sufficient if text loses contrast on a particular crop.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Avoid putting the overlay above the content
A pseudo-element can create a flexible overlay, but it must not cover the heading or buttons. This stacking pattern keeps the overlay behind the content:
.site-header {
position: relative;
isolation: isolate;
min-height: 20rem;
color: white;
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(0 0 0 / 0.35);
}
.site-header__content {
position: relative;
}The header is positioned and creates an isolated stacking context. The content is also positioned, so the overlay does not intercept or visually cover interactive elements.
Use an image element when the image has meaning
A CSS background is not exposed to assistive technology as an image with alternate text. Do not use it for information users need to understand the page.
Use a semantic image instead:
<header class="site-header">
<img
class="site-header__image"
src="/images/header.webp"
width="1920"
height="720"
alt="A hiker standing beside a mountain lake"
>
<div class="site-header__content">
<h1>Mountain lake hiking guide</h1>
</div>
</header>The alt value should explain the image’s purpose in context. Do not use title as a replacement for alt. If the image is purely decorative even though it uses <img>, use alt="". Omitting alt is different: some screen readers may announce the filename.
To make the image fill a fixed header box without distortion:
Rank #3
- Customizable Canvas Art: Personalize your space with a unique, high-quality 24"x36" canvas print that can be customized with your chosen image, making it a perfect fit for any room or decor style
- Unframed & Versatile: This 24"x36" artwork comes as a pure canvas (no frame), giving you the freedom to frame it according to your preference and seamlessly integrate it into your home or office decor
- Vibrant Colors & High-Quality Printing: Each canvas is printed using advanced ink technology to ensure vibrant, long-lasting colors that will not fade over time, delivering stunning visual impact for years to come
- Perfect for Any Room: Whether it's your living room, bedroom, or office, this unframed canvas art offers a timeless design that adds an elegant and personal touch to any space
- Easy to Hang: The unframed canvas is lightweight and easy to mount, allowing for a hassle-free installation with your choice of frame or hanging method
.site-header {
position: relative;
min-height: 20rem;
overflow: hidden;
}
.site-header__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.site-header__content {
position: absolute;
inset: 0;
display: grid;
place-content: center;
z-index: 1;
}object-fit applies to replaced elements such as <img> and <video>. It does not apply to an <iframe>. Like background-size: cover, object-fit: cover preserves the aspect ratio and clips overflow when the image and box have different proportions.
Important: object-fit does not crop an image merely because it has width: 100%. Cropping needs a constrained box with a different aspect ratio, usually created with height, min-height, or aspect-ratio.
Set a predictable header ratio
For a banner that should scale with its width, use aspect-ratio:
.site-header {
width: 100%;
height: auto;
aspect-ratio: 16 / 6;
background: url("/images/header.webp") center / cover no-repeat;
}This expresses a preferred width-to-height ratio. It affects sizing when at least one dimension is automatic. If both width and height are explicitly fixed, the ratio does not override those dimensions.
A ratio is also useful on an image:
.site-header__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 6;
object-fit: cover;
}For images, supplying the real intrinsic dimensions in HTML is still valuable:
<img
src="/images/header.webp"
width="1920"
height="720"
alt=""
>Those dimensions let the browser reserve space before the file loads and reduce layout shifts. CSS width: 100% alone does not guarantee that stability.
Serve responsive header images
An <img> can select a more suitable file for each viewport using srcset and sizes:
Recommended Free Tools
Rank #4
- Print Quality that Stuns – Our premium 12-color high-resolution inks combined with fade-resistant technology ensure every pixel prints in lifelike vibrancy. Unlike cheap personalized poster prints, these won’t fade or discolor over time.
- Upload. Customize. Create. – Upload your JPEG or PNG image, using the customize tool to crop & position your posters and prints. Choose between gloss or matte, portrait or landscape to turn your vision into a custom print that commands attention.
- Industry-Leading Photo Paper – Our heavyweight 250gsm 10 mil gloss and matte photo paper feels premium, looks premium and outperforms anything you’ll find in mass-market print shops. Make your own poster with professional, gallery-worthy results.
- No Creases. No Rolled Edges. No Stress – Shipped in a heavy-duty poster tube, your custom prints arrive safe, unbent and ready to frame, hang or clip in no time. The reinforced tube packaging is designed to prevent rolls, folds and tears in transit.
- Trusted For 25+ Years – Posterprintshop has been printing for families, professionals & corporations since 2000. We’re USA-owned & operated with friendly local support. Now with same day printing so your customized poster is at your door fast.
<img
src="/images/header-1280.webp"
srcset="
/images/header-640.webp 640w,
/images/header-1280.webp 1280w,
/images/header-1920.webp 1920w
"
sizes="100vw"
width="1920"
height="720"
alt=""
>sizes="100vw" tells the browser that the image is expected to render at the viewport width. If the header sits inside a narrower container, describe that instead—for example, sizes="(max-width: 900px) 100vw, 900px".
Use <picture> when mobile needs a different composition rather than merely a smaller file. A wide desktop photograph may crop badly on a tall phone, while a portrait-oriented mobile crop can keep the subject visible.
Do not automatically add loading="lazy" to a header visible in the initial viewport. Lazy loading can delay an image users need immediately. The default for an <img> is eager loading. fetchpriority="high" can provide a priority hint for an especially important image, but it is not a guarantee and should not be applied indiscriminately.
Make the design responsive
A desktop header height often produces an awkward crop on a phone. Adjust the header’s height, position, or image source at a breakpoint:
.site-header {
min-height: 24rem;
background-position: 50% 35%;
}
@media (max-width: fortyrem) {
.site-header {
min-height: 18rem;
background-position: 65% center;
}
.site-header__content {
padding-block: 3rem;
}
}Replace fortyrem with a valid CSS length such as 40rem; the example is shown here to highlight a frequent typo. The working version is:
@media (max-width: 40rem) {
.site-header {
min-height: 18rem;
background-position: 65% center;
}
}For an <img>, use <picture> when the mobile crop must be genuinely different:
Best Value
- CUSTOMIZATION: Transform your favorite photos and images into stunning wall art with our personalized posters printing service
- VERSATILE DISPLAY: Perfect for decorating living rooms, bedrooms, offices, or any space that needs a personal touch with your memories
- SIMPLE PROCESS: Easy upload system lets you submit your chosen images and customize the final appearance of your poster
- QUALITY PRINTING: High-resolution printing technology ensures sharp, vivid reproduction of your photos with excellent color accuracy
- PERSONAL MEMORIES: Create meaningful wall decor from wedding photos, family portraits, vacation snapshots, or artistic images
<picture>
<source
media="(max-width: 40rem)"
srcset="/images/header-mobile.webp"
>
<img
src="/images/header-desktop.webp"
width="1920"
height="720"
alt="A hiker standing beside a mountain lake"
>
</picture>Common header-image failures
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears | The URL is wrong, the file is unsupported, or the image failed to load. | Open the exact URL in a browser and inspect the Network panel. Check the path, filename, extension, and server response. |
| The header has no height | Background images do not create intrinsic height. | Add content, padding, min-height, a fixed height, or aspect-ratio. |
| The subject is cut off | cover is cropping the image around its center. |
Change background-position or object-position, reduce the box height, or provide a mobile crop. |
| The image is stretched | background-size: 100% 100% or object-fit: fill. |
Use cover or contain to preserve the aspect ratio. |
| The image shows a gap underneath | An inline <img> aligns to the text baseline. |
Set display: block on the image. |
| The heading is hidden by a dark layer | The pseudo-element overlay is stacked above the content. | Use a positioned content wrapper and a deliberate stacking pattern with isolation and z-index. |
height: 100% does not fill the header |
The containing block has no definite height. | Give the parent a definite height or use min-height and an explicit image sizing strategy. |
A practical implementation checklist
- Decide whether the image is decorative or meaningful.
- Use
background-imagefor decorative imagery and<img>with suitablealttext for meaningful imagery. - Give the header a real sizing rule. A background image alone is not enough.
- Use
coverfor a full-bleed crop orcontainwhen the complete image must remain visible. - Test the focal subject at desktop, tablet, and phone widths.
- Add an overlay when text contrast changes across the photograph.
- Include image dimensions on
<img>elements to reserve space. - Use
srcset,sizes, or<picture>when responsive delivery or art direction matters. - Verify the image URL and check browser developer tools if the header is blank.
FAQ
Should a header image use CSS background-image or img?
Use a CSS background for decorative imagery behind header content. Use an <img> when the image itself conveys information, because an image element can provide alternate text and responsive image sources.
Why is my CSS background image not showing?
Check the image URL first, then check whether the header has height. A background image does not create intrinsic height. Also verify that the file exists, the format is supported, and another CSS rule is not replacing the background declaration.
Does background-size: cover show the entire image?
No. cover fills the header while preserving the aspect ratio, so it can crop the image. Use contain to display the complete image, accepting that empty space may appear.
How do I stop a header subject from being cropped?
Adjust background-position for a background image or object-position for an <img>. If one crop cannot work across all screen sizes, supply a separate mobile image with <picture>.
Can I use alt text on a CSS background image?
No. CSS background images do not provide an image element to which alternate text can be attached. If the image is meaningful, change the markup to use <img alt="...">.
The Bottom Line
The most dependable decorative header pattern is a real header height, background-size: cover, a deliberate focal point, and an overlay that keeps text readable. For meaningful images, use a semantic <img> with accurate dimensions and alternate text. Add responsive sources when the desktop crop cannot serve mobile users well.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
