Background Size

‘background-size’ property

  • Used to set the size of the element’s background image

  • The image can be left to its natural size, stretched, or constrained to fit the available space

values

  • contain

    • Scales the image as large as possible without cropping or stretching the image.

  • cover

    • Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

  • auto

    • Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.

  • length

    • Stretches the image in the corresponding dimension to the specified length.

    • Accepts an integer (number); negative values are not allowed.

  • percentage

    • Stretches the image in the corresponding dimension to the specified percentage of the background positioning area

Live Example

JS Bin on jsbin.com