Właściwość rozmiaru tła CSS
Przykład
Określ rozmiar obrazu tła za pomocą „auto” i w pikselach:
#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;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość background-sizeokreśla rozmiar obrazów tła.
Istnieją cztery różne składnie, których można używać z tą właściwością: składnia słowa kluczowego („auto”, „cover” i „contain”), składnia jednowartościowa (ustawia szerokość obrazu (wysokość staje się „auto”)), składnia dwuwartościowa (pierwsza wartość: szerokość obrazu, druga wartość: wysokość) oraz składnia wielokrotnego tła (oddzielona przecinkiem).
| Domyślna wartość: | automatyczny |
|---|---|
| Dziedziczny: | nie |
| Animowalny: | tak. Przeczytaj o animacji |
| Wersja: | CSS3 |
| Składnia JavaScript: | obiekt .style.backgroundSize="60px 120px" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit-, -moz- lub -o- określają pierwszą wersję, która działała z przedrostkiem.
| 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- |
Składnia CSS
background-size: auto|length|cover|contain|initial|inherit;
Wartości nieruchomości
| 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 |
Więcej przykładów
Przykład
Określ rozmiar obrazu tła za pomocą procentu:
#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%;
}
Przykład
Określ rozmiar obrazu tła za pomocą „okładki”:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Przykład
Określ rozmiar obrazu tła za pomocą "zawiera":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Przykład
Tutaj mamy dwa obrazy tła. Podajemy rozmiar pierwszego obrazka w tle za pomocą „zawiera”, a drugiego obrazka w tle za pomocą „okładki”:
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Przykład
Użyj różnych właściwości tła, aby utworzyć obraz „bohatera”:
.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 */
}
Powiązane strony
Samouczek CSS: tła CSS
Dokumentacja HTML DOM: właściwość backgroundSize