Barvy a pozadí

color

p {
color: #669933;
}

Pomocí této CSS vlastnosti lze obarvit téměř cokoliv. Možnosti zápisu barev mají samostatnou kapitolu, takže to pouze shrnu:

způsob zápisu	příklad (obarvení načerveno)
název barvy	color: red;
#rrggbb	color: ff0000;
#rgb	color: f00;
rgb(r,g,b)	color: rgb(255,0,);
rgb(r%,g%,b%)	color: rgb(100%,0%,0%);

bacground-color

p {
background-color: green;
}

Nastaví barvu pozadí libovolného prvku. Je možné použít buď hodnotu transparent pro průhledné pozadí nebo jakýkoliv z výše uvedených zápisů barvy.

background-image

Umožňuje umístit na pozadí prvku obrázek, který se bude neustále opakovat. Je vhodné zároveň s ním uvádět i barvu pozadí, pro případ, že by se obrázek nenačetl. [ukázka]

Možné hodnoty:
hodnota	popis
none	výchozí nastavení – pozadí bez obrázku
url("cesta/obrazek.gif")	pozadí s obrázkem "obrazek.gif"

Příklad zápisu:

body {
background-color: black;
background-image: url(./obrazky/logo.png);
}

background-repeat

p {
background-repeat: repeat-x;
}

Nastaví možnosti opakování obrázku na pozadí:

hodnoty	způsob opakování pozadí
repeat	pozadí se opakuje, až vyplní celý prostor prvku (výchozí hodnota)
no-repeat	pozadí se neopakuje, vykreslí se pouze jednou
repeat-x	pozadí se opakuje v ose x, tj. horizontálně; na výšku se vykreslí jednou
repeat-y	pozadí se opakuje v ose y, tj. vertikálně; na šířku se vykreslí jen jednou

background-position

p {
background-position: 50px 50px;
}

Umístí obrázkové pozadí kamkoliv v daném prvku. Je dobré zároveň zakázat opakování pozadí, protože jinak docílíte pouze posunutí neustále se opakujícího obrázku.

Možnosti zápisu:

"procento" nebo "procento procento"

Pokud se uvede pouze jedna hodnota, bude použita pro horizontální směr. Ve vertikálním se automaticky nastaví 50%. V případě uvedení obou hodnot určuje první horizontální směr a druhá směr vertikální.

"vzdálenost" nebo "vzdálenost vzdálenost"

Funguje to stejně jako procenta, jen se zadává vzdálenost v pixelech. Pokud je zadána pouze jedna hodnota, vertikální směr se automaticky nastaví na 50%. Vzdálenosti v pixelech a procentech jdou kombinovat.

poslední možností je použití klíčových slov:

slovo	překlad	druh zarovnání
top	nahoru	vertikální
center	na střed	vertikální
bottom	dolů	vertikální
left	doleva	horizontální
center	na střed	horizontální
right	doprava	horizontální

Opět lze vertikální a horizontální zarovnání kombinovat (top left, center bottom... ). Nezáleží na tom, zda uvedete jako první zarovnání vertikální nebo horizontální.

background-attachment

p {
background-attachment: fixed;
}

Umožní ukotvit pozadí. To znamená, že při scrollování se pozadí neposouvá, ale na rozdíl od obsahu prvku zůstane na místě. Tato vlastnost může nabývat pouze dvou hodnot:

scroll – výchozí hodnota, pozadí se posouvá
fixed – pozadí se napevno ukotví a neposouvá se [ukázka]

background

Umožňuje zkrácený zápis všech vlastností týkajících se pozadí, a to v tomto pořadí: background-color, background-image, background-repeat, background-position a background-attachment. Stejně jako u vlastnosti font se jednotlivé hodnoty oddělují mezerou a libovolnou hodnotu je možno vynechat.

Příklad:

p { 
background: red url("obrazky/hory.gif") no-repeat top center fixed;
}

V příkladu bude pozadí červené a přes něj obrázek hory.gif, který se nebude opakovat a bude napevno uchycen nahoře, uprostřed odstavce.

< Předchozí Následující >

O webu

Slovníček pojmů

Odkazy

Verze pro tisk (pdf)