CSS Property background-size

The background-size property is employed to specify the dimensions of background pictures.

The background image may be set to hide the element’s entire background space or have definite dimensions outlined by the CSS author.

A background image may be set to hide the complete element’s background space mistreatment the duvet keyword. It may also be set to be as massive as potential whereas being contained inside the background space mistreatment the contain keyword. If any of those 2 keywords is employed, the intrinsic quantitative relation of the image’s height and dimension area unit preserved if the image has intrinsic dimensions and proportions.

Some s have intrinsic dimensions and proportions, like JPEG pictures, as an example, and different pictures like s don’t have intrinsic dimensions and proportions and take up the dimensions of the element’s background space unless such otherwise (see values below). the ultimate size of the background image is rendered reckoning on whether or not a picture has intrinsic dimensions and proportions.

For combine values, the primary worth specifies the dimension of the image, and therefore the second worth specifies the peak of the image.

If only 1 non-keyword worth is such, the opposite one is assumed to be motorcar.

The background-size property may also take comma-separated values in order that once the component has quite one background image, every worth is applied to a corresponding background image (first worth for the primary image, second worth for the second image, and so on).

CSS Property background-size Value

  • <length>
  • <percentage>
  • contain
  • cover
  • auto

<length>

A <length> value scales the background image to the specified value in the corresponding direction. Negative lengths are not allowed.

<percentage>

A proportion price scales the background image to the required proportion price relative to the background positioning space, that is set by the worth of the background-origin property. Unless the worth of the background-origin property is about by the author, it’s the worth of padding-box, which implies that the background image is positioned with relation to a background arrangement whose center is at the highest left corner of the cushioning box. Negative proportion values don’t seem to be allowed.

contain

Scale the image, whereas conserving its intrinsic ratio (if any), to the biggest size specified each its breadth and its height will work within the background positioning space. If the background image has no intrinsic proportion and no intrinsic dimension, then it’s rendered at the dimensions of the background positioning space.

cover

Scale the image, whereas protective its intrinsic ratio (if any), to the tiniest size such each its breadth and its height will fully cowl the background positioning space. If the background image has no intrinsic proportion and no intrinsic dimension, then it’s rendered at the dimensions of the background positioning space.

auto

The auto keyword that scales the background image in the corresponding direction such that its intrinsic proportion is maintained.

Desktop Browser Support

Mobile Browser Support

Examples

background-size: cover; /* keyword value */
background-size: contain; /* keyword value */
background-size: 100% 50%; /* pair of non-keyword values */
background-size: 300px 200px; /* pair of non-keyword values */
background-size: 50% auto; /* non-keyword value + the value 'auto' */

One comment

  1. I couldn’t resist commenting

Leave a Reply