CSS 'background-size' Property Explained

The CSS 'background-size' property specifies the size of the background images. The size can be set as specific dimensions, scaled to fit inside the background area (contain), or stretched to cover the element's background area. This property is key for designing responsive backgrounds that adapt to the element's size and ensuring that background images are displayed correctly across different screen sizes and resolutions.

CSS 'background-size' Property Examples

See the Pen CSS 'background-size' Property by Webzstore (@webzstore) on CodePen.

The 'background-size' property is an essential tool for web designers and developers, allowing for versatile background image styling that can adapt to various design needs and enhance the visual appeal of web content.

Browser Support For 'background-size' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-size for the full compatibility details, including mobile browsers.

CSS Syntax of the 'background-size' Property

background-size: [ <length-percentage> | auto ]{1,2} | cover | contain;

background-size: 50%;           /* width 50%, height auto */
background-size: 200px 100px;   /* width 200px, height 100px */
background-size: cover;         /* fill the area, crop if needed */
background-size: contain;       /* fit inside the area, no cropping */

Usage of the 'background-size' Property

Use 'background-size' to control how a background image should be scaled or stretched within an element. This is particularly useful for creating full-width backgrounds that cover an area without distorting the image's aspect ratio, effectively tiling small images, or fitting an image precisely to a specific design area.

Property Values of the 'background-size' Property

• Auto: The background image keeps its intrinsic size and aspect ratio. If only one of the two values is auto, that dimension is calculated from the other one so the aspect ratio is preserved. This is the initial value.
• Length: Sets the width and height of the background image using units (e.g., px, em). The first value sets the width, and the second value sets the height. If only one value is given, the second is assumed to be 'auto.'
• Percentage: This setting sets the size of the background image in percentage values relative to the background positioning area (the padding box by default, as set by background-origin). The first value is the width, and the second is the height.
• Cover: Scales the background image, preserving its aspect ratio, to the smallest size that still completely covers the background positioning area. Some parts of the background image may not be in view within the background positioning area.
• Contain: Scales the image, preserving its aspect ratio, to the largest size at which both its width and height still fit inside the background positioning area. The image is not cropped, but empty space may be left, and the image tiles into that space unless background-repeat is no-repeat. The background positioning area is set by background-origin and is the padding box by default, not the content box.
• Initial: Resets the 'background-size' to its default value (auto).
• Inherit: Inherits the 'background-size' from the parent element.