Background-size

Webkit	Gecko	Trident	Presto
532	2.0	9.0	2.5

This specifies the size of a background. It can be defined in a number of ways, such as by using percentages or keywords.

There are two keywords which can be used with background-size:

• contain – This contains the background image within the object and retains its aspect ratio.
• cover – The background image is scaled in such a way that it covers the entire background while retaining its aspect ratio. This leads to some overflow, but this is minimized as much as possible

Along with these keywords you can use percentages and values! You can also use the keyword auto to mean that the default value should be used. As usual, the syntax follows the [x] [y] style.

background-size: 50% auto;
background-size: 20% 30%;
background-size: 20px 3em;

Background Properties

Property	Description
background-clip	The area you want the background to appear in
background-color	The color you wish the background to be.
background-image	An image which you want to use as the background.
background-repeat	What direction you want the background to repeat in. This can be repeat-x, repeat-y or no-repeat
background-origin	The starting point for the background
background-size	The size the background should cover
background-attachment	If you wish the background to be fixed (i.e. it doesn’t move if the user scrolls) or if you want it to scroll as the user scrolls.
background-position	A keyword or number with unit defining the position where the background should start