Pro pozadí prvků níže používám následující obrázek s rozměry 640×360px. Strany obrázku mají poměr 16:9, zatímco prvek, na jehož pozadí jej umisťuji, má poměr stran 4:3.
Bez použití background-size si zachová původní velikost:
background-size: cover
Velikost obrázku se upraví, aby akorát pokryl plochu prvku. Přebytečné části
obrázku (zde po stranách) se oříznou:
background-size: contain
Velikost obrázku se upraví, aby se celý vešel do prvku. Vypnul jsem opakování,
takže části pozadí prvku (zde nahoře a dole) nejsou vyplněny:
background-size: 50%
Obrázek se zmenší, tak aby na šířku zabral polovinu šířky prvku, jehož pozadí
tvoří. Ve svislém směru se zmenší analogicky, aby poměr jeho stran zůstal
zachován a nedošlo k deformaci:
background-size: auto 50%
Podobné předchozímu, ale tentokrát je polovina měřena svisle:
background-size: 10rem 3rem
Velikost obrázku se upraví na zadané rozměry. Liší-li se jejich poměr od
poměru stran obrázku, bude zdeformován:
zpět: Obrázek na pozadí