O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

background-size

Values:

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

Expansions:

<bg-repeat-style>

[ <length> | <percentage> | auto ]{1,2} | cover | contain

Initial value:

auto

Applies to:

All elements

Inherited:

No

Computed value:

See description

Description:

Defines the size of one or more background origin images. If two keywords are used (e.g., 50px 25%), the first defines the horizontal size of the image and the second defines the vertical size. The origin image can be deformed to exactly cover the background with 100% 100%. By contrast, cover scales up the image to cover the entire background even if some of it exceeds the background area and is thus clipped, and contain scales up the origin image so that at least one of its dimensions exactly fills the corresponding axis of the background area.

Examples:

body {background-size: 100% 90%;}
div.photo {background-size: cover;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required