CSS background-size Eigenschap

Definitie en gebruik

background-size De eigenschap bepaalt de maat van de achtergrondafbeelding.

HTML DOM referentiemanual:backgroundSize-eigenschap

Bepaal de maat van de achtergrondafbeelding:

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

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

Waarde	Beschrijving	Test
length	Stel de hoogte en breedte van de achtergrondafbeelding in. De eerste waarde stelt de breedte in, de tweede waarde stelt de hoogte in. Als er maar één waarde wordt ingesteld, wordt de tweede waarde ingesteld op "auto".	Test
percentage	Stel de breedte en hoogte van de achtergrondafbeelding in als percentage van de ouder-element. De eerste waarde stelt de breedte in, de tweede waarde stelt de hoogte in. Als er maar één waarde wordt ingesteld, wordt de tweede waarde ingesteld op "auto".	Test
cover	Breid de achtergrondafbeelding uit tot voldoende groot om de achtergrondafbeelding volledig te bedekken. Sommige delen van de achtergrondafbeelding kunnen mogelijk niet worden weergegeven in het achtergrondpositiegebied.	Test
contain	Breid het beeld uit tot de grootste maat om de breedte en hoogte volledig aan te passen aan het inhoudsgebied.	Test

Standaardwaarde:	auto
Inheritantie:	nee
Versie:	CSS3
JavaScript syntaxis:	object.style.backgroundSize="60px 80px"

Stretch de achtergrondafbeelding: Stretch de achtergrondafbeelding om de inhoudsgebied volledig te bedekken.
Stretch de achtergrondafbeelding om de achtergrondafbeelding vier keer horizontaal te kopiëren: Stretch de achtergrondafbeelding om ervoor te zorgen dat de achtergrondafbeelding exact vier keer horizontaal wordt gekopieerd.

De getallen in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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-