css-3Blog

A CSS alapjaival foglalkozó sorozat jelenlegi részében a CSS segítségével megvalósítható hátterekkel foglalkozunk. Háttere szinte minden DOM entitásnak lehet, de talán legtöbbször a body illetve a div elemekhez szoktunk hátteret beállítani. A beállításhoz a CSS background tulajdonságának különböző variációira lesz szükségünk.

A background-color segítségével beállíthatjuk a háttér színét. Ez főleg akkor hasznos, ha nem valamilyen képet akarunk beállítani háttérként vagy fennáll annak a lehetősége, hogy a háttérként beállítani kívánt kép mérete nem éri el a teljes kitöltendő területet, és a kép által nem takart rész színét mi akarjuk meghatározni. A legfontosabb az, hogy mindig ügyeljünk a háttér és a tartalom kontrasztjára, mert a fekete alapon sötétszürke betűk — és még rengeteg további példát sorolhatnék — olvasása rendkívül fárasztó, így látogatóink otthagyják az oldalt akármennyire érdekes is a tartalom. A következő beállítással például feketére állíthatjuk az egész oldal hátterét:

body {
background-color: black;
}

A background-image tulajdonság beállításával egy képet használhatunk háttérként. Mivel háttérképről van szó, ezért célszerű olyan képet választani, amely nem vonja el a figyelmet a tartalomról. Ehhez általában az kell, hogy a kép ne legyen nagyon harsány, lehetőleg legyen homogén és elegendő kontraszt maradjon közte és a tartalom között. A következő példa egy szakasz háttérképét állítja be:

div {
background-image: url(background.jpg);
}

A background-repeat segítségével adhatjuk meg, hogy a background-image-ként beállított háttérkép ismétlődjön-e vagy sem. A repeat, a repeat-x, a repeat-y és a no-repeat beállítások közül választhatunk. A repeat megadásával a képet – ha az kisebb, mint az elem, aminek a hátterének beállítottuk – mind függőlegesen, mind vízszintesen ismétli úgy, hogy az elemet teljesen lefedje. A no-repeat ennek pontosan az ellenkezője: nem ismétli meg a képet, akkor sem, ha így az elem valamekkora része háttérkép nélkül marad. Ilyenkor a képpel nem fedett rész a background-color tulajdonság által megadott színű, vagy ennek hiányában alapértelmezett színű (általában fehér). A repeat-x csak vízszintesen, a repeat-y pedig csak függőlegesen ismétli a beállított háttérképet. A következő beállítás nem ismétli a háttérképet:

body {
background-repeat: no-repeat;
}

Háttérképünknek nem kötelező az alapértelmezés szerinti középen lennie. A background-position beállításával megadhatjuk, hogy a háttérkép hova kerüljön. A beállításnál a top, bottom, center, left és right lehetőségeken kívül pontos értéket vagy százalékot is megadhatunk. A következő példa a háttérképet balra, és az elem tetejéhez képest 10 pixellel lejjebb igazítja:

div {
background-position: left 10px;
}

A végére hagytam a legérdekesebbet, a background-attachment tulajdonságot. Két beállítási lehetősége van: a scroll és a fixed. Ha a scroll van beállítva – ez az alapértelmezett -, akkor az elem görgetésével annak háttere is vele együtt mozog. A fixed beállítás esetén viszont a háttér helyben marad, és görgetéskor csak a tartalom mozog. A fixed beállítás ízléses alkalmazása sokszor feldobja az oldal összhatását. A következő példa rögzíti az oldal hátterét:

body {
background-attachment: fixed;
}

Ha szeretünk rövidíteni, használjuk a background tulajdonságot, amely lehetőséget ad a fentiek egyszerre való beállítására. A sorrend ilyenkor a következő kell legyen: background-color, background-image, background-repeat, background-attachment, background position. Például:

body {
background: black url(background.jpg) no-repeat fixed left 10px;
}

A fent bemutatott background-tulajdonságok minden elterjedt böngésző esetében használhatóak.