CSS - eigenschap op achtergrondformaat
Voorbeeld
Specificeer de grootte van een achtergrond-afbeelding met "auto" en in pixels:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De background-size
eigenschap specificeert de grootte van de achtergrondafbeeldingen.
Er zijn vier verschillende syntaxis die u met deze eigenschap kunt gebruiken: de trefwoordsyntaxis ("auto", "cover" en "contain"), de syntaxis met één waarde (stelt de breedte van de afbeelding in (hoogte wordt "auto"), de syntaxis met twee waarden (eerste waarde: breedte van de afbeelding, tweede waarde: hoogte) en de syntaxis voor meerdere achtergronden (gescheiden door komma).
Standaardwaarde: | auto |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.backgroundSize="60px 120px" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
CSS-syntaxis
background-size: auto|length|cover|contain|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
auto | Default value. The background image is displayed in its original size | |
length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
contain | Resize the background image to make sure the image is fully visible | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Specificeer de grootte van een achtergrondafbeelding met procent:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Voorbeeld
Specificeer de grootte van een achtergrondafbeelding met "omslag":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Voorbeeld
Specificeer de grootte van een achtergrondafbeelding met "bevatten":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Voorbeeld
Hier hebben we twee achtergrondafbeeldingen. We specificeren de grootte van de eerste achtergrondafbeelding met "bevatten", en de tweede achtergrondafbeelding met "omslag":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Voorbeeld
Gebruik verschillende achtergrondeigenschappen om een "held"-afbeelding te maken:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-achtergronden
HTML DOM-referentie: backgroundSize eigenschap