Aby obraz tła elementu pokrył cały jego obszar z zachowaniem proporcji obrazu, nawet kosztem przycięcia jego brzegów, należy zastosować deklarację CSS
background-size: contain;background-size: cover;background-repeat: repeat;background-position: center;Wartość background-size: cover; skaluje obraz tła tak, żeby całkowicie pokrył element, zachowując proporcje. Jeśli proporcje obrazu i elementu się różnią, wystające brzegi zostaną przycięte. Dzięki temu tło nie zostawia pustych pasów i nie jest rozciągnięte.
Zwykle łączy się ją z background-position: center;, żeby przycinane były brzegi, a środek obrazu zostawał widoczny. Przykład pełnoekranowego nagłówka: header { background-image: url(baner.jpg); background-size: cover; background-position: center; }. Dla zwykłych obrazków wstawianych znacznikiem img ten sam efekt daje object-fit: cover;.
Wartość działa tak samo w każdej współczesnej przeglądarce i nie wymaga skryptów.
contain i cover łatwo pomylić, bo obie zachowują proporcje. background-size: contain; dopasowuje obraz tak, żeby zmieścił się w całości, więc nic nie jest przycinane, ale przy innych proporcjach zostają puste pasy, a obraz nie pokrywa całego elementu.
background-position: center; ustawia tylko miejsce obrazu w elemencie i nie zmienia jego rozmiaru. Mały obraz pozostanie mały, tylko przesunie się na środek.
background-repeat: repeat; powiela obraz jak kafelki, aż wypełni element. Obszar zostaje pokryty, ale wieloma kopiami, a nie jednym przeskalowanym obrazem. To zresztą wartość domyślna. Jednym obrazem pokrywa cały obszar tylko cover.
Przy cover nic się nie rozciąga, tylko przycina.
Obie wartości można też zastąpić rozmiarem podanym wprost, np. background-size: 100% 100%;, ale wtedy obraz się rozciąga i traci proporcje.