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
- 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-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|