CSS background-size ominaisuus

Definition and usage

background-size Attribute defines the size of the background image.

See also:

CSS tutorial:CSS tausta,CSS Background (Advanced)

HTML DOM reference manual:backgroundSize attribute

Example

Define the size of the background image:

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

Try it yourself

CSS syntax

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

Attribute value

Value Description Test
length

Set the height and width of the background image.

The first value sets the width, and the second value sets the height.

If only one value is set, the second value will be set to "auto".

 Test
percentage

Set the width and height of the background image as a percentage of the parent element.

The first value sets the width, and the second value sets the height.

If only one value is set, the second value will be set to "auto".

 Test
cover

Extend the background image to be large enough to completely cover the background area.

Some parts of the background image may not be displayed in the background positioning area.

 Test
contain Extend the image to the maximum size to make its width and height completely fit the content area. Test

Technical details

Default value: auto
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.backgroundSize="60px 80px"

Lisää esimerkkejä

Venyttää taustakuvaa
Venyttää taustakuvaa täysin peittääkseen sisältöalueen.
Venyttää taustakuvaa, jotta taustakuva toistuu horisontaalisesti neljä kertaa
Venyttää taustakuvaa, jotta taustakuva toistuu horisontaalisesti juuri neljä kertaa.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-