background-size Description:
This is a CSS 3 property from the CSS 3 Working Draft. Until the draft has been finalized, there may be additional changes. For most up-to-date information, go to the W3C.
The background-size property allows you to change the size of the background image to better fit your page. It is often thought of as the background stretch property.
background-size in CSS Versions:
background-size Syntax:
background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]
- length - A specific size
- percentage - A size relative to the container element.
- round - tells the user agent to get it close to that width or height
If you specify one value, the image stretches the same amount for width and height. Two values equal the width then the height to stretch.
background-size Initial Value:
auto
background-size Applies To:
All elements.
background-size Inheritance:
This property is not inherited.
background-size Browser Support:
background-size Examples:
- stretch to 100% height and width
<div style="background : url(purple.gif) no-repeat; background-size: 100%;">
This paragraph has the purple.gif image as a background that stretches to 100% of the width and height of the div.
</p> - Set a specific size for the background image
<div style="background-image: url(purple.gif); background-size: 10em;">
This paragraph has the purple.gif image as a background that is 10em by 10em.
</p>
background-size Special Notes:
- The round keyword indicates that the width and height are approximate.
- Negative values are not allowed.
- If you use a background-size: 0; then the image will not display, the same effect as if the image were completely transparent.
More background-size Information:
