By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Background-size

This property can be used to control the size of backgrounds.

Edited: 2015-02-21 15:04

The background-size property of CSS is used to control the size of background images. One of its uses is to make a background-image stretch, and take up all the space of its parent element.

Allowed Values

lengthControls the width and height of the background image. The first value controls the width, and the second controls the height of the image.
percentageSets the width and height as a percentage of the parent element.
coverThe image will be greater than or equal to the background positioning area.
containThe background will not exceed the background positioning area.

CSS Background-size Example

html { 
  background: url("my-background.png") no-repeat center center fixed;
  background-size: cover;
}

Tutorials

  1. How to make a background image Stretch