Free · Fast · Privacy-first

CSS Hero Section Background Generator

A hero section background needs to fill the viewport, keep headline text readable against any image, and scale gracefully across every screen size from mobile to ultrawide displays.

⚡

Generates full-screen hero CSS with min-height: 100vh

🔒

Overlay gradient for text readability over background images

✨

Configurable background-size, position, and repeat settings

⚡

Preview at multiple viewport widths to check mobile cropping

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Background Gen to your website

Drop the Background Gen into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Full-Screen Hero Backgrounds: Structure, Overlays, and Text Readability

A full-screen hero section requires min-height: 100vh to fill the viewport height regardless of content length, paired with min-height: 100svh on newer browsers so the section sizes to the visible area on mobile rather than the area covered by the address bar. Setting height: 100vh instead is stricter and clips content whenever the viewport is shorter than expected, which becomes a real problem on landscape phones and small laptop screens. min-height allows the section to expand naturally if content overflows. Pair this with background-size: cover and background-position: center so the image fills the full area without distortion. Adding display: flex with align-items: center and justify-content: center vertically and horizontally centres the hero content, while align-items: flex-end with padding-bottom: 64px anchors a large headline above the bottom edge.

Text readability over a background image requires a semi-transparent overlay calibrated to the dominant tone of the image. A dark overlay works for light-coloured heading text: layer linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) above the image in the background shorthand. Adjust the rgba alpha to control darkness, and check the result against the lightest and darkest pixels of the photo. A directional gradient that darkens only at the top or bottom where text sits is more visually refined than a uniform veil: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%, transparent 100%) darkens the top third where a headline typically sits while leaving the lower image area visible. Always validate contrast ratios with a checker: white text at 18pt requires at least 3:1 against the effective overlay colour to meet WCAG large-text requirements.

Mobile cropping is the single most common hero image problem and the one developers discover last. At 375px viewport width, a 1920px-wide landscape hero image crops to show only the middle portion. If the image subject sits at the right or left edge, it disappears entirely on mobile and the hero loses its meaning. Set background-position to the subject location: background-position: 70% center for a subject at 70% from the left of the image. On very narrow viewports, consider swapping to a different image asset using a @media query that overrides background-image with a portrait-cropped or square version. The CSS object-fit: cover approach on a real img element gives more art-direction control through the picture element with multiple source sets than background images ever can.

Performance shapes the hero section as much as visual design. The hero image is almost always the Largest Contentful Paint element on a marketing page, which makes its load time the single biggest lever for Core Web Vitals. Preload the image with a link rel="preload" tag in the HTML head so the browser starts downloading before the stylesheet finishes parsing. Serve a modern format such as AVIF or WebP at the actual display resolution, since 4000px source images compressed to 200KB still take longer to decode than a 1600px image of the same byte size. For art-directed responsive heroes, consider using an img element with srcset and sizes instead of CSS background-image so the browser can pick the right asset per breakpoint without downloading the full-resolution version on every device.

MDN: min-height CSS Tricks: Hero Image Backgrounds

How to use this tool

💡

Enter the hero image URL, choose an overlay gradient opacity, and select the overlay direction (top to bottom or bottom to top for bottom-aligned headlines). The tool generates the complete hero section CSS with background layers, min-height, and display: flex for vertical content centring.

How It Works

Step-by-step guide to css hero section background generator:

1
Enter the hero image URL
Paste the URL to your hero background image from your CDN or local asset path. Use a minimum 1600px wide image at the source, ideally encoded as WebP or AVIF for smaller bytes per pixel. The tool previews it at full container width with cover sizing so you can see immediately how the image fills the section before adding the overlay or layout.
2
Set overlay opacity and direction
Choose an overlay gradient to darken the image for text readability and pick a direction based on where the headline will sit. Top-to-bottom darkening suits top-aligned headlines, bottom-to-top suits bottom-aligned content, and a uniform overlay covers any layout safely if you do not yet know where the text will land in the final design.
3
Configure min-height and layout
Select min-height: 100vh, 100svh, or a custom value, then choose the flex alignment that matches your design: center for hero CTAs, flex-end for bottom-anchored headlines, flex-start for top-aligned hero text. The tool emits the matching display: flex declaration and any padding required for safe content spacing inside the section.
4
Copy the complete CSS block
Copy all declarations including background, min-height, display, flex alignment, padding, and overlay layers in a single block. Paste into your hero section CSS class, Tailwind layer, or styled-components template, and the section will render exactly as the preview without any manual tweaking after the paste.

Real-world examples

Common situations where this approach makes a real difference:

Agency developer building a client homepage hero

A developer sets up a full-screen hero for a boutique hotel client. The hero features a landscape photograph of the property at golden hour, a directional gradient overlay that darkens from bottom to top using linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%), and a large white serif headline anchored to the bottom of the section with align-items: flex-end and padding-bottom: 96px. The tool generates the correct layer order with the gradient listed first in the background shorthand so the overlay paints above the image, and the result matches the Figma comp pixel for pixel without a second iteration.

Startup building a SaaS landing page hero

A startup engineer creates a hero with a pure gradient background and no photographic image, moving from #0f172a to #1e293b with a subtle dot grid overlay built from a radial-gradient pattern repeated at 32px intervals. They use min-height: 100svh to avoid the mobile address bar problem where the bottom CTA disappears under the chrome on first load. The hero content uses display: flex with align-items: center and justify-content: center to position the headline, subhead, and primary CTA button at the viewport centre, with a max-width container limiting line length for readability.

Designer testing mobile crop of a wide hero photograph

A designer discovers that the hero photograph looks great at desktop width but crops to a featureless stretch of sky at 375px on mobile, which empties the hero of meaning above the fold. They adjust background-position from center to 60% center to shift focus toward the building that sits in the right portion of the source image. The tool confirms the new position keeps the building in frame at the 375px preview width and verifies it also reads correctly at 414px and 768px before the fix goes to the developer for implementation in the production stylesheet.

Performance engineer reducing LCP time on hero section

An engineer finds the hero background image is the LCP element on the homepage and lands 1.4 seconds after the HTML response in field data. They add a preload link tag for the hero image in the document head and reduce the image to a 1200px WebP from the original 4000px JPEG, cutting weight from 850KB to 140KB. The background-image URL in the CSS still uses the same CDN path. These two changes together reduce LCP from 2.8 seconds to 1.1 seconds on a simulated 4G connection and move the Core Web Vitals score from poor to good in the next CrUX report.

Pro tips

Get better results with these expert suggestions:

Use aspect-ratio instead of fixed height for non-full-screen heroes

For hero sections that do not need to fill the full viewport, set aspect-ratio: 16/9 or 3/1 combined with width: 100% and the section resizes proportionally as the viewport narrows. This eliminates the need for media queries on the section height entirely and avoids the awkward fixed-height hero that becomes too tall on mobile or too short on widescreen monitors. Browser support for aspect-ratio is universal in modern browsers.

Separate the overlay from the background image for easier maintenance

Rather than layering the overlay gradient inside the background shorthand, use a ::before pseudo-element with background: rgba(0,0,0,0.5) and position: absolute covering the section. This keeps the background-image declaration simpler, lets you update overlay opacity or add additional effects like a vignette or pattern without rewriting the entire background shorthand, and makes the overlay easier to animate independently of the underlying image during scroll or theme transitions.

Preload the hero image for above-the-fold performance

CSS background images are discovered only after the stylesheet is parsed and the matching rule is applied, which costs hundreds of milliseconds on slow connections. Add a link rel="preload" as="image" href="hero.jpg" tag in the HTML head for the hero image, and the browser starts the download immediately on receiving the HTML rather than waiting for CSS parsing. This change alone often reduces Largest Contentful Paint by 500ms or more on pages where the hero is the LCP element.

Check the hero on a real mobile device, not just browser devtools

Browser device emulation does not accurately replicate iOS Safari address bar behaviour, safe area insets, the dynamic island on newer iPhones, or touch scroll bounce. A hero section that looks correct in Chrome emulation may display incorrectly on a physical iPhone where 100vh exceeds the visible screen height and the address bar appears on initial load. Test on at least one real iPhone and one mid-range Android before declaring the hero shipped.

Use min-height: 100svh on mobile for accurate viewport height

On mobile browsers, 100vh includes the address bar height and can cause hero sections to be taller than the visible screen. Use min-height: 100svh (small viewport height) which excludes the browser chrome for a more accurate full-screen effect on mobile Safari and Chrome.

Test overlay contrast with WCAG checker

White text on a background image with an rgba(0,0,0,0.5) overlay has an effective background luminance determined by the image tone. Use the background colour generator to check the contrast ratio for the darkest and lightest parts of the image beneath the overlay.

Provide a smaller image for mobile breakpoints

Serving a 1920px hero image to a 375px phone wastes 3-4x the necessary bandwidth. Use a media query to swap to a narrower, portrait-cropped image at mobile widths. This reduces page weight and improves load time on cellular connections.

FAQ

Frequently asked questions

Use min-height: 100vh on the hero section as the baseline declaration. This sets the minimum height to the full viewport height as reported by the browser, and the section will still expand if its content overflows. For mobile browsers where 100vh includes the address bar and produces a section that is taller than the visible area on first load, layer min-height: 100svh on top using the small viewport height unit, which reflects only the area visible to the user. Combine these height rules with background-size: cover and background-position: center so the background image fills the section completely without distortion on any aspect ratio.

Layer a semi-transparent gradient above the image in the background shorthand by listing it first: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("hero.jpg") center/cover no-repeat. The first layer in the shorthand sits on top of the second layer in painting order, which is why the gradient comes before the image URL. Adjust the rgba alpha to control how dark the overlay is, starting around 0.4 for moderately bright photos and going up to 0.7 for busy or high-contrast images. For directional overlays, use to bottom or to top in the gradient to darken only the side where the text sits, which keeps more of the image visible than a uniform overlay.

100vh represents 100% of the viewport height as reported by the browser, which on mobile includes the browser interface such as the address bar and toolbar. On initial page load in mobile Safari, this makes 100vh taller than the visible area, so a hero with min-height: 100vh shows part of itself hidden under the chrome until the user scrolls. 100svh, the small viewport height unit, is calculated with the browser interface visible and reflects only the area that is actually visible to the user. For mobile hero sections, 100svh delivers a more accurate full-screen result. 100lvh, the large viewport height, is the opposite case where the browser interface is hidden, and 100dvh, the dynamic viewport height, updates as the chrome shows and hides during scroll.

Set the hero section to display: flex with align-items: center and justify-content: center, and the child content centres both vertically and horizontally with no further code. If you want the content at a specific vertical position such as the bottom third for a movie-poster look, use align-items: flex-end with padding-bottom: 64px or larger to add breathing space from the bottom edge. Alternatively, use position: absolute on the content wrapper with top: 50% and transform: translateY(-50%) for vertical centring without flexbox, which is useful when the section already has other flex children that should not stretch.

For purely decorative hero backgrounds where text overlay carries the meaning, a CSS background image is appropriate and keeps the markup clean. For hero images that are themselves the primary visual content, such as product hero shots, people, or artwork pieces, use an img element with object-fit: cover and a descriptive alt attribute. The img element is indexed by search engines for image search, accessible to screen reader users, and supports the picture element for art-directed responsive sources. CSS background images are ignored by assistive technology and most crawlers. If the hero image carries information rather than decoration, the img element is the correct choice every time.

Add a link rel="preload" as="image" tag in the HTML head for the hero image URL so the browser starts downloading the image before it finishes parsing the CSS, which reduces Largest Contentful Paint time substantially. Serve the image in WebP or AVIF format at the actual display resolution, which for most hero sections sits between 1200px and 1600px wide. Avoid serving 3000px and larger images to a 1400px container because the byte savings of compression are often eaten by the decode time on mobile CPUs. Use responsive images with srcset or distinct CSS background-image rules at media query breakpoints so mobile traffic downloads a right-sized asset.

Use background-size: cover with background-position set to the image focal point so the image fills the section at every aspect ratio. At mobile breakpoints, switch to a portrait-cropped version of the image using a @media query that overrides background-image with a different asset URL. Use min-height: 100svh to size the section correctly across screen sizes without resorting to fixed pixel heights that break on certain devices. Test on actual mobile devices, not just browser devtools, to catch iOS Safari-specific issues such as the address bar shift and safe area inset behaviour on phones with notches or dynamic islands.

Yes, but not via CSS background-image. Use a video element as a child of the hero section with position: absolute, top: 0, left: 0, width: 100%, height: 100%, and object-fit: cover so the video behaves like a cover background. Set the video to autoplay, muted, loop, and playsinline so iOS Safari plays it inline rather than launching a fullscreen player. Layer content above the video using position: relative and z-index on the content wrapper. Add a poster attribute on the video element pointing to a still image that shows before the video starts loading, which doubles as a fallback for users on metered connections.

Add padding-top: env(safe-area-inset-top) and padding-bottom: env(safe-area-inset-bottom) to the hero content wrapper, and include viewport-fit=cover in the meta viewport tag so the section extends edge to edge under the notch. Without these declarations the hero content can sit under the dynamic island or the home indicator on modern iPhones, partially hiding the headline or CTA. The env() values fall back to zero on devices without safe areas, so the same CSS works everywhere without device sniffing.