Właściwość background-size

Właściwość background-size ustawia rozmiar obrazka tła. Wartością właściwości są dowolne jednostki wymiarów, albo słowa kluczowe auto, cover lub contain.

Składnia

selektor {
	background-size: wartość;
}

Słowa kluczowe

Wartość	Opis
`auto`	Tło będzie miało naturalny rozmiar, taki, jak rzeczywisty rozmiar obrazka tła. Jeśli `auto` jest podane tylko dla jednego boku, to wzdłuż tego boku tło będzie skalowane tak, aby zachować niezakłócone proporcje.
`cover`	Skaluje obrazek tak, aby przykrył sobą cały blok z zachowaniem proporcji. Obrazek będzie starał się zmieścić całkowicie, ale nie zawsze się to uda, więc jakaś jego część zostanie przycięta. Blok zawsze będzie pokryty obrazkiem całkowicie.
`contain`	Skaluje obrazek tak, aby całkowicie zmieścił się w bloku z zachowaniem proporcji. Przy tym może zająć albo całą szerokość, albo całą wysokość (zależy od proporcji obrazka i od wymiarów elementu). Blok w ogólnym przypadku będzie pokryty obrazkiem nie całkowicie (za to obrazek zawsze będzie widoczny w całości, choć w pomniejszonej wersji).

Wartość domyślna: auto.

Użycie

Jednostki wymiarów i auto mogą być użyte w różnych kombinacjach, na przykład tak: auto 20px, lub 30% 20px, lub auto 30% i tak dalej. W tym przypadku pierwszy parametr ustawia rozmiar tła wzdłuż szerokości, a drugi parametr - rozmiar tła wzdłuż wysokości. Jeśli podany jest jeden parametr - to on będzie ustawiał rozmiar tła zarówno wzdłuż szerokości, jak i wzdłuż wysokości jednocześnie.

Przykład

Teraz obrazek tła będzie miał swój naturalny rozmiar:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

Przykład

Teraz obrazek tła będzie miał rozmiar 300px na 400px (w naszym przypadku proporcje obrazka zostaną zniekształcone):

<div id="elem"></div>

#elem {
	background-size: 300px 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Przykład

Teraz obrazek tła będzie miał rozmiar 400px na 400px (w naszym przypadku proporcje obrazka zostaną zniekształcone):

<div id="elem"></div>

#elem {
	background-size: 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Przykład

Teraz obrazek tła będzie miał rozmiar 400px w poziomie, a w pionie jego rozmiar dostosuje się tak, aby proporcje nie zostały zniekształcone:

<div id="elem"></div>

#elem {
	background-size: 400px auto;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Przykład

Teraz obrazek tła będzie miał rozmiar 400px w pionie, a w poziomie jego rozmiar dostosuje się tak, aby proporcje nie zostały zniekształcone:

<div id="elem"></div>

#elem {
	background-size: auto 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Przykład . Wartość contain

Przyjrzyj się działaniu wartości contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Przykład . Wartość cover

Przyjrzyj się działaniu wartości cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Przykład . Poprawiamy działanie cover

Działanie wartości cover można poprawić, jeśli wyśrodkujemy obrazek za pomocą właściwości background-position (w naszym przypadku na widoczne części zaczną trafiać głowy koni, a nie ich zady):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Zobacz też

właściwość background,
reprezentująca właściwość-skrót dla tła