Choosing the wrong background-size value is one of the most common causes of distorted, awkwardly cropped, or pixelated background images on production sites.
Loading Background Gen…
Live preview of cover, contain, and custom background-size values
Compare cropping behaviour across different container aspect ratios
See how retina and 2x images behave with 50% background-size
One-click copy of the final background-size declaration
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.
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>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
background-size: cover scales the image to the smallest size that completely fills the element, cropping any part of the image that overflows along the axis where the image aspect ratio does not match the element aspect ratio. The image maintains its native aspect ratio so it never distorts, only crops. If the element is wider than it is tall relative to the image dimensions, the image gets cropped along the top and bottom edges. If the element is taller relative to the image, the image gets cropped along the left and right edges. The visible portion is controlled by background-position, where background-position: center keeps the centre of the image in view as the default, and background-position: top center keeps the top of the image visible when the bottom is cropped, which is what you want for portraits with the subject at the top. Cover is the default choice for hero sections and full-bleed backgrounds where empty gaps are unacceptable.
background-size: contain scales the image to the largest size that fits entirely within the element without cropping any portion. Gaps appear along one axis whenever the element and image aspect ratios differ, and those gaps fill with whatever colour or repeat behaviour the other background properties specify. By default, background-repeat: repeat fills the gaps by tiling the image, which is rarely what you want for a hero. Setting background-repeat: no-repeat leaves visible gaps filled by the background-color value or shows the parent background through a transparent fallback. Contain is appropriate for logos, diagrams, and infographic images where showing the entire image matters more than filling the container. A common mistake is using contain for a hero photograph, which results in a small centred image with large empty bars on either side that look like a layout bug.
Explicit size values give precise control when neither cover nor contain produces the intended result. background-size: 400px 300px sets a fixed pixel size regardless of container dimensions. background-size: 100% auto scales the image to the full element width and calculates height proportionally from the image aspect ratio, which is useful for wide header images that should span the full width without distortion. background-size: 50% is useful for retina 2x images: a 400 by 400 pixel image intended for display at 200 by 200 logical pixels should use background-size: 200px 200px or 50 percent when the element width is 400px. Without this adjustment, the retina image appears at its natural pixel size, twice as large as intended on standard 1x displays.
Container queries and the aspect-ratio property pair well with background-size in modern responsive designs. Setting aspect-ratio: 16/9 on a background-image container lets the element scale with its parent width while maintaining a fixed shape, which keeps the crop predictable as the viewport resizes. Combining aspect-ratio: 16/9 with background-size: cover produces a hero panel that crops the image consistently at every viewport width without media queries, JavaScript resize listeners, or padding-bottom hacks. Container queries let you swap background-size between cover and contain based on the element width itself rather than the viewport width, which is useful for components that appear in both wide and narrow contexts within the same page layout.
Enter a background image URL, then toggle between cover, contain, and custom size values using the selector. Resize the preview container to test how the image behaves at different aspect ratios. For retina images, enter 50% to halve the display size and match the 2x pixel density.
Step-by-step guide to css background size: cover, contain, and responsive images:
Enter the image URL
Paste the background image URL into the field at the top of the tool. The preview renders the image inside a sample container using the default background-size: cover setting and background-position: center so you have a working reference frame to compare against as you experiment with other values. The tool accepts both absolute URLs starting with https and relative paths, and it warns if the URL appears to be malformed or returns a non-image response.
Select a size value
Choose cover, contain, or enter an explicit value in pixels or percentage using the size selector. Watch how the preview updates the image cropping and scaling in real time, and toggle the container aspect ratio control to see how the same size value behaves in a wide landscape container versus a tall portrait one. The side-by-side preview makes the difference between cover and contain immediately visible rather than requiring you to imagine it from the property name.
Adjust background-position
Set the position to control which part of the image stays visible when cover crops it along one axis. Use the position grid to click-and-set a focal point, or type a keyword like center, top, or bottom, or enter a percentage pair such as 30% 70% for fine control. The position only affects the visible crop when background-size is cover or contain with a non-matching aspect ratio, so the tool indicates whether position will have any visual effect at the current size setting.
Copy the CSS
Click Copy CSS to get the background-size, background-position, and background-repeat declarations as a clean multi-line block ready to paste into your stylesheet. The tool generates the longhand properties rather than the shorthand by default so that each value is easy to read and adjust individually, but a toggle is available to switch to the compact background shorthand form if you prefer the single-line declaration in your codebase.
Common situations where this approach makes a real difference:
Developer setting a full-bleed hero image
A developer needs a hero section that fills the full viewport width and 600 pixels of height with a landscape photograph of mountains. They use background-size: cover and background-position: center to ensure the image fills the section without distortion at every viewport width. On mobile at 375 pixels wide the image crops along the left and right edges, but the centrally-positioned mountain ridge stays in frame. The tool confirms the cropping behaviour at 375px, 768px, 1024px, and 1440px container widths before the developer commits the values to the stylesheet and merges the pull request.
Designer placing a logo on a coloured card background
A designer wants to place a company logo as a background image on a brand card, centred with padding around it on all four sides. They use background-size: contain with an explicit pixel value of 80 by 80 pixels so the logo displays at a fixed size regardless of card dimensions, background-position: center to keep the logo aligned, and background-repeat: no-repeat to prevent tiling. The card background-color shows behind and around the logo as the brand colour. Contain ensures the logo is never cropped or distorted regardless of card aspect ratio.
Engineer handling retina background icons
An engineer has a 48 by 48 pixel icon exported at 2x resolution producing a 96 by 96 pixel source file, intended for use as a background image on a 48 by 48 pixel button. Without adjustment, the icon renders at its natural 96px size and overflows the button container, breaking the design at every appearance of the button. They set background-size: 48px 48px to display the retina image at the correct logical size, which the browser then renders at 96 device pixels on a 2x display for crisp output. The tool previews the result and confirms alignment.
Student learning responsive background image behaviour
A student is confused about why their background image leaves white gaps at certain screen widths even though they have applied background-size: contain. The tool shows them side-by-side previews of cover versus contain on a 4:3 image inside a 16:9 container at various widths. Cover fills the container completely but crops the image at the top and bottom. Contain fits the entire image but leaves gaps along the left and right edges that show the fallback colour. The visual comparison resolves the confusion that reading the MDN specification alone had not, and the student understands the trade-off for the rest of their career.
Get better results with these expert suggestions:
Use background-size in the shorthand background property
The background shorthand accepts background-size after background-position, separated by a forward slash, as in background: url(img.jpg) center/cover no-repeat. The single-line form is more concise than four separate longhand declarations and remains readable for the common case of a single covered hero image. The shorthand requires the position value to be present before the slash, so omitting position causes the parser to misinterpret the size value as something else and silently drop the entire declaration. Always include at least the position keyword before the slash, even when it is the default value.
Combine with aspect-ratio on the container
Setting aspect-ratio: 16/9 on a background-image element ensures the container maintains a fixed shape as it scales with its parent, removing the need for explicit height values that often break when content changes. Combine with background-size: cover to create a consistently cropped image panel that adapts to container width without JavaScript, padding-bottom percentage hacks, or media queries. The aspect-ratio property is supported across every modern browser and degrades gracefully to its initial value on older browsers that still need a min-height fallback.
Use percentage background-size for scalable icon backgrounds
background-size percentages resolve relative to the element dimensions rather than the image dimensions, which is the opposite of how background-position percentages work and worth keeping clear in your head. background-size: 50% 50% scales the image to half the element size in both directions, which is predictable for SVG background icons in buttons where the icon should always occupy a fixed proportion of the button area regardless of button size. This is more robust than fixed pixel sizes when buttons appear at multiple sizes across the design system.
Test cover cropping with different container widths
An image that looks perfectly framed at 1200 pixels wide may lose its focal point entirely at 375 pixels wide on a mobile viewport because cover crops along the wider axis as the container narrows. Use background-position with explicit percentage offsets, such as background-position: 30% 20%, to keep the focal point visible across the full range of container widths the design uses, then verify the framing at the smallest expected container width. Resize the browser slowly from 1440px to 320px and watch the focal point throughout the range.
Use cover with background-position for art direction
Set background-position to keep the subject of the image visible when the container crops it. For a portrait with a face at the top, use background-position: center top to prevent the face from being cropped when the container is wide and short.
Set explicit size for retina sprite sheets
If you use a 2x resolution sprite sheet as a background image, set background-size to half the sprite sheet pixel dimensions. This prevents the sprite sheet from rendering at double size on standard displays.
Test container resize when using contain
Contain leaves gaps when the element and image aspect ratios differ. Set background-color to a complementary colour for these gap areas, or use contain only in elements that match the image aspect ratio closely.
More use-case guides for the same tool:
Other tools you might find useful:
Open the full Background Gen — free, no account needed, works on any device.
Open Background Gen →Free · No account needed · Works on any device