Background size property (background-size)

The CSS3 specification added 3 more properties to well-known background group of properties, defined in CSS2.

When adding a background image to an element, it’s important to realize that the background is simply that. The element won’t increase in size to accommodate that great image you’ve chosen. If you want the image to be displayed in full, you need to make sure the element is wide and tall enough. At least, that’s the case in older browsers. CSS3 gives you more flexibility with the background-size property, which is supported by all browsers in widespread use except IE 8 and earlier.

Syntax:

selector {

}

Values:

The background-size property accepts the following values:

contain - Scales the image to the largest possible size so that both, its width and height, fit into the background positioning area.
cover - Scales the image to its smallest size so that both, its width and height, can completely cover the background positioning area.
length or percentage - One or two lengths (pixels, points, ems…) or percentages.
auto – Sets the property to its default values which are the original values of the image.
initial or inherit

When using lengths or percentages, the first value sets the width of the background image, and the second sets its height. If only one value is given, the height is treated as auto. Percentages are relative to the background positioning area as determined by background-origin.

The contain, cover, and auto keywords all preserve the image’s aspect ratio.

NOTE: If put together, the value for background-size must be preceded by a value for background-position, with the two values separated by a forward slash.

Example

Example with background-size property and contain and auto values:

<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    padding:2px 3px; margin:12px 2px; width:98%; min-height:80px;
    color:#222; border:1px solid #444;
    background: url("../../../img/tutorials/logo_full.png") no-repeat center right;
    background-size: contain;
}
div#orig{
    height:150px;
    background-position:bottom left;
    background-size: auto;
}
</style></head>

<body>

<div><strong>This background contains sized image</strong></div>
  <div id="orig"><strong>This background contains original image.<br />As you can see,
    it doesn't fit the container</strong></div>

</body>
</html>

›› go to examples ››

Background size property (background-size)

Syntax:

Values:

Example

Example with background-size property and contain and auto values:

Comments

About

Contact

Get Connected