CSS background-size Property

Description

The background-size property in CSS is a powerful tool for controlling how background images are displayed within an element. It defines the dimensions of the background image, determining whether it should stretch, shrink, or retain its original size when rendered. By adjusting this property, designers can ensure that images fit the container in a visually appealing way, whether the goal is to cover the entire element, contain the image within the boundaries, or specify exact dimensions. Its behavior can dramatically influence the overall design, especially in responsive layouts where element sizes may change across devices.

When working with background-size, it often interacts closely with background-position, which sets the starting position of the background image, and background-repeat, which controls whether the image tiles across the element. Using these properties together, a developer can achieve precise control over both the placement and scaling of background imagery. For instance, an image can be scaled to cover the entire element while remaining centered, preventing awkward cropping or tiling that could disrupt the design flow.

Additionally, background-size is particularly useful in responsive web design, as it allows images to adjust seamlessly to varying container dimensions. When set to cover, the image expands to fill the element completely, potentially cropping some parts but maintaining its aspect ratio. Conversely, the contain value ensures the entire image fits inside the element without cropping, though this may leave empty spaces if the aspect ratios differ. Developers can also define exact dimensions using lengths or percentages, giving complete control over width and height. This flexibility makes background-size essential for creating dynamic, visually consistent designs across a wide range of screen sizes and devices.

Definition

Initial value: auto
Applies to: All elements
Inherited: No
Computed value: As specified, but with lengths made absolute
Animatable: Yes
JavaScript syntax: object.style.backgroundSize

Interactive Demo

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

Syntax

background-size: <bg-size> [ , <bg-size> ]*

Values

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

<length>A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
<percentage>An integer, followed by a percent (%). A percentage value is relative to the background positioning area.
autoScales the background image in the corresponding direction such that its intrinsic proportion is maintained.
containScale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
coverScale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Example

HTML

<div class="container">

    <h1>background-size examples</h1>



    <div class="grid">

        <figure class="card cover">

            <div class="preview">Cover</div>

            <figcaption>background-size: cover;</figcaption>

        </figure>



        <figure class="card contain">

            <div class="preview">Contain</div>

            <figcaption>background-size: contain;</figcaption>

        </figure>



        <figure class="card auto">

            <div class="preview">Auto</div>

            <figcaption>background-size: auto;</figcaption>

        </figure>



        <figure class="card custom">

            <div class="preview">150px 50%</div>

            <figcaption>background-size: 150px 50%;</figcaption>

        </figure>

    </div>

</div>

CSS

:root {
    --img: url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=800&q=80");
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin: 24px;
    background: #f7f7f8;
    color: #111;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

h1 {
    font-size: 20px;
    margin-bottom: 16px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.preview {
    height: 140px;
    background-image: var(--img);
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cover .preview {
    background-size: cover;
}

.contain .preview {
    background-size: contain;
    background-color: #222;
}

.auto .preview {
    background-size: auto;
    background-color: #444;
}

.custom .preview {
    background-size: 150px 50%;
    background-color: #333;
}

figcaption {
    padding: 12px 16px;
    font-size: 13px;
    color: #555;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background-size property. Hover over a browser icon to see the version that first introduced support for this CSS property.