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}

Úkol

• Ve složce WWW si vytvořte složku 19.
• Ze složky 18 si zkopírujte všechny potřebné soubory.
• Soubor style.css upravte takto:
  • přidejte na konec komentář "CV19",
  • přidejte do pozadí obrázek, který si stáhněte zde a rozbalte jej do složky IMG,
  • obrázek v pozadí nastavte tak, aby se neopakoval,
  • dále aby obrázek nepohyboval při scrollování,
  • a jeho pozice na stránce byla nastavena nahoře a na střed.
• Zkontrolujte na případné chyby a uložte.