Ezek a tulajdonságok írják le egy elem (gyakran előtérszínként
[foreground color] említett) szín és háttértulajdonságait. A háttér az a
felület, amelyre a tartalom kirajzolásra kerül. Ez lehet háttér szín, vagy
háttér kép. Szintén ezek a tulajdonságok használhatóak néhány más fontos
megjelenítési lehetőség beállításához: háttér-kép helyzete, legyen-e és
hányszor ismételve, fix legyen-e, vagy gördíthető a vászonhoz képest,
stb...
A color tulajdonság normál módon öröklődik. A háttér
tulajdonságai nem öröklődnek, de az egyes szülő elemek hátterei áttűnnek
az alapértelmezett háttérértéken, mivel a background-color
alapértelmezett értéke a transparent.
Értéke lehet: szín Alapértelmezés:
Böngészőfüggő. Alkalmazható: Minden
elemhez Öröklődik: Igen Százalékos értékek: Nincs
értelmezve
Ez a tulajdonság írja le egy elemhez tartozó szöveg színét; gyakran
előtérszínként (foreground color) történik róla említés. Egy szín
értékének meghatározása többféle módon történhet:
EM { color: red }
EM { color: rgb(255,0,0) }
EM { color: #FF0000 }
Fenti három deklaráció mindegyike az EM elem szövegéhez a
vörös színt rendeli hozzá. Az első esetben a szín nevét írtuk le, a
második és harmadik esetben a szín RGB kódját; először
decimálisan, az utolsó esetben hexadecimálisan.
Értéke lehet: <url> |
none Alapértelmezés:none Alkalmazható: Minden
elemhez Öröklődik: Nem Százalékos értékek: Nincs
értelmezve
Ez a tulajdonság állítja be egy elem hátterként látható képet. Egy
háttérkép beállításakor beállítható háttérszín is, amely akkor látható, ha
a kép nem elérhető. Ha a kép megjeleníthető, a háttérszínt el fogja
takarni.
BODY { background-image: url(hatter.gif) }
P { background-image: none }
Értéke lehet:repeat | repeat-x |
repeat-y | no-repeat
Alapértelmezés:repeat Alkalmazható: Minden
elemhez Öröklődik: Nem Százalékos értékek: Nincs
értelmezve
Ha van háttér-kép beállítva, a 'background-repeat'
tulajdonsággal állítható be, hogy legyen-e és hányszor legyen ismételve a
kiválasztott kép.
A repeat érték azt jeleni, hogy a kép vízszintesen és
függőlegesen egyaránt ismétlődni fog. A repeat-x
(repeat-y)érték felelős a kép vízszintes (függőleges)
ismétlődéséért; így egy kisebb méretű háttérképből a képernyő egyik
oldalától a másikig érő sáv állítható elő.
BODY
{
background: red url(hatter.gif);
background-repeat: repeat-y;
}
Példa
Fenti példában a háttérkép függőlegesen ismétlődik.
Értéke lehet:scroll |
fixed Alapértelmezés:scroll Alkalmazható: Minden
elemhez Öröklődik: Nem Százalékos értékek: Nincs
értelmezve
Ha van beállított háttérkép, a 'background-attachment'
értéke határozza meg, hogy fixen marad-e, vagy a tartalommal együtt
gördíthető.
BODY
{
background: red url(hatter.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Példa
A böngészők néha a fixed értéket is
scroll-nak értelmezik. A W3C
ajánlása azt tartalmazza, hogy a böngészők a fixed értéket
értelmezzék helyesen, legalább a HTML és a BODY
elemek vonatkozásában, mivel a weblapok szerzőinek nincs arra lehetőségük,
hogy külön hátteret válasszanak csak a gyengébb képességű böngészők
számára.
Értéke lehet:[<százalékos> |
<hossz>]{1,2}|[top | center | bottom]|| [left |
center | right] Alapértelmezés:0%
0% Alkalmazható: Blokkszintű- és helyettesített
elemekhez Öröklődik: Nem Százalékos értékek:
Viszonyítási alap a formázott elem
Ha van beállított háttér-kép, a 'background-position'
értéke határozza meg annak betöltődéskor elfoglalt helyzetét. A 0%
0% értékpár használatával a kép az elemet körbefogó doboz bal felső
sarkába kerül. (Nem a margót, szegélyt, kitöltést tartalmazó dobozról van
szó.) A 100% 100% értékpár a kép jobb alsó sarkát az elem
jobb alsó sarkába helyezi. A 14% 84% értékpár a képet az
elemen vízszintesen a 14%-ot jelentő ponttól függőlegesen a 84%-ot jelentő
pontig helyezi el.
A 2cm 2cm értékpár a képet az elem bal felső sarkától 2
cm-re balra és 2 cm-re lefelé helyezi el.
Ha csak egy százalékos, vagy hosszúságérték van megadva, az csak a
vízszintes pozíciót állítja be, a függőleges pozíció értéke 50% lesz. Két
érték megadása esetén a vízszintes pozícióra vonatkozó értéket kell
először megadni. A hosszúság- és százalékos értékek kombinációja
megengedett (50% 2cm). Megengedett a negatív értékek
használata is.
A háttérkép helyzetének beállításához használhatók kulcsszó-értékek is.
A kulcsszavak nem kombinálhatók a hosszúság- és százalékos
értékekkel. A használható kulcsszó-kombinációk és értelmezésük:
BODY {background: url(hatter.gif) right top
BODY {background: url(hatter.gif) top center
BODY {background: url(hatter.gif) center
BODY {background: url(hatter.gif) bottom
Példa
Ha a háttér-kép rögzítve van a vászonhoz (lásd a background-attachment
tulajdonságot följebb), az elem elhelyezéséhez a méretek viszonyítása nem
az elemhez, hanem a vászonhoz történik.
Értéke lehet: <background-color> ||
<background-image> || <background-repeat> ||
<background-attachment> ||
<background-position> Alapértelmezés: Nincs
definiálva Alkalmazható: Minden elemhez Öröklődik:
Nem Százalékos értékek: Használható a
<background-position> tulajdonsághoz.
A background egy ún. gyorstulajdonság, amellyel egy helyről
állítható be az összes háttérre vonatkozó tulajdonság. Használható értékei
megegyeznek az egyedi háttér-tulajdonságok összes értékeivel.
BODY {background: red}
P {background: url(hatter.jpg) gray 50% repeat fixed}
A background tulajdonság mindig beállítja az összes egyedi
tulajdonságot. Az első példában csak a háttér-szín lett beállítva, a többi
tulajdonság alpértelmezett értékeit kapja. A második példában az összes
egyedi tulajdonság kapott kezdőértéket.