WebDev.wiki > CSS > CSS vlastnosti a hodnoty > background

background

Definice a použití

Background je CSS vlastnost, která přiřazuje HTML elementu určité vlastnosti jeho pozadí. Nastavuje se barva, obrázek, opakování a "chování" pozadí prvku. Jednotlivé vlastnosti se dají také použít samostatně.

CSS syntaxe

background: background-color background-image background-position background-repeat background-attachment;

Hodnoty vstupů	Popis	Hodnota
background-color	barva pozadí
background-image	obrázek pozadí, dá se 1 HTML prvku definovat maximálně 1 obrázek na pozadí
background-position	umístění pozadí v pixelech - x y
background-repeat	opakování pozadí	repeat no-repeat repeat-x repeat-y
background-attachment	"chování" pozadí	scroll fixed

Ukázka:

Přidá blokovému HTML elementu čisté černé pozadí

CSS

div {
   background: #000 none;
}

Použité vlastnosti: background

HTML

<div>Ukázka</div>

Použité tagy: <div>

Výsledek:

Ukázka

Ukázka:

Přidá blokovému elementu neopakující se obrázek na pozadí. Musí se zde definovat opakování pozadí. Výchozí hodnota je: repeat.

CSS

div {
   background: url('cesta-k-obrazku') 0 0 no-repeat;
}

Použité vlastnosti: background

Ukázka:

Přidá blokovému elementu obrázek na pozadí přikotven na místě.

CSS

div {
   background: url('cesta-k-obrazku') no-repeat fixed; 
}

Použité vlastnosti: background

Podpora webových prohlížečů

Firefoxano

Internet Explorerano

Google Chromeano

Safariano

Operaano

Tip1 Zanořením HTML elementů do sebe a nastavením jejich background vlastnosti, docílíte překrývání jednotlivých pozadí přes sebe.

Tip2 Použitím kombinace např.: background: #000 url('cesta-k-obrazku') no-repeat; docílíte toho, že daný HTML element bude mít výplň pozadí černou barvou a nad ní bude zobrazen definovaný obrázek.