CSS background-size Property

The background-size property controls the scale of an element's background image. It allows you to specify whether an image should stretch to fill, fit within, or maintain its original dimensions inside a container.

selector { background-size: auto | cover | contain | <length> | <percentage>; }
auto The default value that keeps the background image at its original intrinsic size.
cover Resizes the image to completely fill the container, potentially cropping the edges if aspect ratios differ.
contain Resizes the image to be as large as possible without being cropped or stretched beyond the container boundaries.
<length> Sets a specific width and height using units like px, em, or rem.
<percentage> Sets the background image size as a percentage of the parent element's background area.

Code Examples

A basic example using the cover value to ensure a background image fills a 400px tall header area completely.

<div style="width: 100%; height: 400px; background-image: url('https://www.adamkhoury.com/images/topic_css.png'); background-size: cover; background-position: center; border: 5px solid #222222;"></div>

An advanced example using JavaScript to toggle the background-size between contain and cover, useful for image previewers.

<div id="preview" style="width: 300px; height: 300px; background-image: url('https://www.adamkhoury.com/images/topic_css.png'); background-repeat: no-repeat; background-size: contain; background-position: center; background-color: #eeeeee; border: 1px solid #999999;"></div>
<button onclick="resizeBg()" style="margin-top: 10px;">Toggle Cover/Contain</button>
<script>
function resizeBg() {
    const box = document.getElementById("preview");
    const current = box.style.backgroundSize;
    box.style.backgroundSize = current === "contain" ? "cover" : "contain";
}
</script>

Pro Tip

You can layer multiple backgrounds and size them individually. Just separate your values with commas. For example, "background-size: 40px, cover;" will size a small repeating pattern at 40 pixels while the main photo underneath covers the entire element. This is a great way to add texture to large sections without extra HTML bloat.

Deep Dive

Think of your background image as a flexible canvas and the element as a wooden frame. The "auto" value leaves the canvas at its original size. "cover" acts like stretching the canvas until every inch of the frame is hidden; if the canvas is wider than the frame, you lose the sides. "contain" ensures the entire canvas is visible inside the frame, even if it leaves empty gaps. When you provide two values, the first handles width and the second handles height. If you only provide one, the browser calculates the other automatically to prevent the image from looking squashed or pulled like taffy.

Best Practices

Use "cover" for hero sections or full-page backgrounds to ensure no white space appears regardless of the screen size. Always pair "cover" with "background-position: center" to keep the important part of your image visible. Use "contain" for logos or icons where losing any part of the image would ruin the design. Avoid using fixed pixel sizes if you want your layout to be truly responsive.

Common Pitfalls

A major trap is using "100% 100%", which forces the image to match the container exactly. This usually results in a distorted, ugly image because most containers don't share the same aspect ratio as the source file. Another mistake is forgetting that "cover" will hide parts of the image; never put essential text or information inside the image file if you plan to use "cover".

Accessibility

Background images are invisible to screen readers. If your background image conveys meaning, you must provide that information in the text content of the page. Ensure the text color on top of a resized image has enough contrast. Since "cover" shifts the image based on screen size, a light part of the photo might move under light text, making it unreadable.

Dev Data Table: background-size property

default auto
animatable yes
inherited no
experimental no
year_intro 2002
year_standard 2011
js_syntax_1 element.style.backgroundSize = "cover";
js_syntax_2 element.style.setProperty("background-size", "contain");
js_note When manipulating this property via the style object, use camelCase. If using setProperty, stick to the standard kebab-case string format.
browsers { "Chrome": 3, "Edge": 9, "Firefox": 4, "Safari": 4.1, "Opera": 10.5, "Chrome Android": 18, "Safari on iOS": 5, "Samsung Internet": 1, "Opera Mobile": 11 }
results render here...