CSS background-size Property

The background-size property is used to specify the size of background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

The initial value of background-size property is auto auto. You can apply this property to all elements. It also applies to ::first-letter and ::first-line. The property is not inheritable.

A background image can be set to cover the entire element’s background area using the cover keyword. It can also be set to be as big as possible while being contained within the background area using the contain keyword. If any of these two keywords is used, the intrinsic ratio of the image’s height and width are preserved if the image has intrinsic dimensions and proportions.

Syntax

This is the formal syntax for using background-size property —

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

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

Here are some examples of using this property —

/* Keywords syntax */
background-size: cover;
background-size: contain;  

/* One-value syntax */
/* the width of the image (height set to 'auto') */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;  

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;  

/* Multiple backgrounds values by background-image */
/* Do not confuse this with background-size: auto auto */
/* The values in this case are comma separated */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;  

Acceptable Values

<length>

In this case, the background image is scaled to the specified value in the corresponding direction. Negative lengths are not allowed.

<percentage>

A percentage value will scale the background image to the specified percentage value relative to the background positioning area. The positioning area is determined by the value of the background-origin property. Negative percentage values are not allowed.

If the background’s attachment is fixed, the entire area of the browser window (excluding the scrollbars if they exist) is considered the background positioning area.

contain

In this case, the image is scaled to the largest size such that both its width and its height can fit inside the background positioning area. The intrinsic aspect ratio (if any) of the image is preserved. If the background image has no intrinsic proportion and no intrinsic dimension, then it is rendered at the size of the background positioning area. The empty areas that could not be covered with the image are filled with the given background color.

cover

In this case, the image is scaled to the smallest size such that both its width and its height can completely cover the background positioning area. The intrinsic aspect ratio (if any) of the image is preserved.If the background image has no intrinsic proportion and no intrinsic dimension, then it is rendered at the size of the background positioning area. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

auto

In this case, the image is scaled in the corresponding direction in such a manner that its intrinsic aspect ratio is preserved.

Examples

See the Pen CSS background-size Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS3 background-image options property (or properties like background-clip, background-origin and background-size that affect background images) is fully supported in 93.3% browsers and partially supported in 4.49% browsers. Therefore, its overall browser support is 97.79%.

This property is partially supported in Firefox 3.6+, Chrome 4+, Safari 4+, Opera 10.0-10.1+, iOS Safari 3.2+ and Android 3+. This property is fully supported in IE 9+, Edge 12+, Firefox 4+, Chrome 15+, Safari 7+, Opera 11+, iOS Safari 8+, Android 53+ and Chrome for Android 55+.

  • Safari also supports the unofficial -webkit-background-clip: text (only with prefix).
  • iOS Safari has buggy behavior with background-size: cover; on a page’s body.
  • iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;.
  • Safari (OS X and iOS) and Chrome do not support background-size: 100% px; in combination with SVG images, it leaves them at the original size while other browsers stretch the vector image correctly while leaving the height at the specified number of pixels.
  • Android 4.3 browser and below are reported to not support percentages in background-size.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top