CSS3 background-size Property

Example

Specify the size of a background image:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Try it yourself »
More examples at the bottom of this page.

---

Browser Support

    

The background-size property is supported in IE9+, Firefox 4+,Opera, Chrome, and Safari 5+.

---

Definition and Usage

The background-size property specifies the size of the backgroundimages.

Default value:autoInherited:noVersion:CSS3JavaScript syntax:object.style.backgroundSize="60px 80px"

---

Syntax

background-size: length|percentage|cover|contain;

ValueDescriptionPlay itlengthSets the height and width of the background image. The first valuesets the width, the second value sets the height. If only one valueis given, the second is set to "auto"Play it »percentageSets the height and width of the background image in percent of theparent element. The first value sets the width, the second valuesets the height. If only one value is given, the second is set to"auto"Play it »coverScale the background image to be as large as possible so that thebackground area is completely covered by the background image. Someparts of the background image may not be in view within thebackground positioning areaPlay it »containScale the image to the largest size such that both its width andits height can fit inside the content areaPlay it »

---

Try it Yourself - Examples

Stretch thebackground-image
Stretch the background image to completely cover the contentarea.

Stretch the background-image tofour copies horizontally
Stretch the background image so that exactly four copies fithorizontally.

---

Related Pages

CSS3 tutorial: CSS3 Backgrounds