Obrázek na pozadí
background-image
- obrázek na pozadí čehokoliv se definuje vlastností BACKGROUNG-IMAGE a cestou k obrázku (tzv. URL)
selektor {background-image: url('img/obr1.jpg')}
- v tomto příkladu to znamená, že obr1.jpg musí být uložen ve složce img (složka img je umístěna společně s HTML či CSS souborem)
Směr opakování obrázku na pozadí
background-repeat
- každý obrázek na pozadí se vykreslí ve svislé i vodorovné ose tolikrát, kolik mu umožní šířka okna
- pomocí vlastnosti BACKGROUND-REPEAT lze nastavit možnosti opakování obrázku na pozadí
- funguje pouze při použití background-image
- tato vlastnost má čtyři možné hodnoty
- repeat: obrázek se opakuje ve všech směrech (výchozí hodnota, není potřeba definovat)
- repeat-x: obrázek se opakuje jen ve vodorovném směru
- repeat-y: obrázek se opakuje jen ve svislém směru
- no-repeat: obrázek se zobrazí jen jednou a neopakuje se
selektor {background-image: url('img/obr1.jpg'); background-repeat: repeat-x}
Zákaz posouvání obrázku na pozadí
background-attachment
- lze též obrázku na pozadí nastavit, zda se má posouvat spolu s obsahem nebo má zůstat zafixovaný na místě
- funguje opět pouze při použití obrázku na pozadí
- tato vlastnost má dvě možné hodnoty
- scroll: obrázek se posouvá spolu s obsahem (výchozí hodnota, není potřeba definovat)
- fixed: obrázek zůstává při posunu obsahu na místě
selektor {background-image: url('img/obr1.jpg'); background-attachment: fixed}
Pozice obrázku na pozadí
background-position
- pomocí této vlastnosti lze ovlivnit pozici obrázku na pozadí daného prvku
- vlastnost je funkční jen při současném použití vlastnosti background-image
- k dispozici je vodorovné zarovnání v ose X
- left: obrázek bude zarovnán k levému okraji prvku
- center: obrázek bude zarovnám na střed prvku
- right: obrázek bude zarovnán k pravému okraji prvku
- lze samozřejmě ovlivnit i svislé zarovnání v ose Y
- top: obrázek bude zarovnán k hornímu okraji prvku
- center: obrázek bude zarovnán na střed prvku
- bottom: obrázek bude zarovnán
selektor {background-image: url('img/obr1.jpg'); background-position: left top}
selektor {background-image: url('img/obr1.jpg'); background-position: center center}
Velikost obrázku v pozadí
background-size
- vlastnost umožňuje roztažení nebo smrsknutí obrázku na pozadí
- vlastnost je funkční jen při současném použití vlastnosti background-image
- k dispozici je několik možných hodnot
- auto: obrázek na pozadí zobrazí neupravený, výchozí hodnota
- 100%: obrázek na pozadí se zvětší nebo zmenší tak, aby se na šířku vešel přesně jednou (výška obrázku se přizpůsobí), obrázek nebude deformován
- 100% 100%: obrázek na pozadí se zvětší nebo zmenší tak, aby se na šířku i výšku vešel přesně jednou, obrázek bude deformován
- contain: obrázek pozadí se zmenší nebo zvětší tak, aby se celý vešel do prvku (delší rozměr obrázku odpovídá delšímu rozměru prvku), obrázek se nedeformuje (pozadí se zobrazí celé)
- cover: obrázek pozadí se zmenší nebo zvětší tak, aby se kratší rozměr vešel do prvku, obrázek se nedeformuje, ale vede k tomu, že část pozadí není vidět
selektor {background-image: url('img/obr1.jpg'); background-size: 100%}
selektor {background-image: url('img/obr1.jpg'); background-size: cover}
