Ebben a cikkben a CSS háttérkép kezelési lehetőségeit mutatom be nektek. Valójában érintőlegesen már foglalkoztunk vele, de külön szeretnék kiemelni egy új lehetőséget, amely a CSS3-ban mutatkozott be, ez nem más, mint a multi-background. Segítségével több hátteret tudunk megadni, ami nagyon hasznos lehet bizonyos esetekben. No, de ne szaladjunk ennyire előre.
1. Background
Ahogy azt bizonyára tudjátok, szinte bármely DOM elemhez rendelhetünk hátteret, de talán a body az, amelyhez a leggyakrabban rendelünk. Elsőként tekintsük át a CSS background syntax-át és nézzünk meg egy-két hozzájuk kötődő tulajdonságot. (A profik ugorjanak a kettes ponthoz, hiszen ezt ők már bizonyára tudják, de a most ismerkedőknek hasznos lehet.)
a, background-color
Ennek segítségével, a háttér színét tudjuk beállítani.
Használata:
background-color: #b0c4de;
A szín megadható:
- HEX érték – Pl. #b0c4de
- RGB érték – Pl. rgb(255,0,0)
- Szín név – Pl. blue
b, background-image
Egy képet tehetünk be a segítségével háttérnek.
Használata:
background-image: url(háttér.jpg);
c, background-repeat és position
A background-repeat segítségével definiálhatjuk, hogy a háttérképünk ismétlődjön vagy sem. Használata:
background-repeat: no-repeat;
értékei lehetnek:
- repeat – függőlegesen és vízszintesen is ismétlődik a kép
- repeat-x – csak vízszintesen ismétlődik
- repeat-y – csak függőlegesen ismétlődik
- no-repeat – nem ismétlődik
A background-position -el pedig megadhatjuk, hogy hova kerüljön a háttérnek beállított képünk. Használata:
background-position: center;
Értékei lehetnek:
- Az összes irány (left, right, top, bottom, center), akár vegyesen is (Pl. left top vagy left center)
- lehetőség van definiálni a potnos helyet is, Pl. 50px 200px (x,y tengely irányában)
d, background-attachment
Gyakorlatilag a háttérnek beállított képet tudjuk a segítségével fixen rögzíteni (csak body), vagy scrollozni a görgetéssel együtt.
Használata:
background-attachment:fixed;
Értékei:
- fixed – rögzítjük a hátteret és csak a szöveg görgethető.
- scroll – a háttérkép is mozog a szöveggel együtt.
Természetesen a CSS lehetőséget biztosít, hogy a fentieket rövid formában adjuk meg, méghozzá a következő módon:
background: blue url(háttér.jpg) no-repeat fixed right top
De én a rövid forma ellenére javaslom, hogy külön sorokba vigyétek fel, tudom, hogy macerásabb, de jobban átlátható lesz tőle a kód.
2. Multi-background
A CSS3-ban került újonnan bevezetésre, segítségével több hátteret tudunk rendelni egy elemhez. A Syntax:
background: url(hatter1.png), url(hatter2.png);
CSS3 multi-background
Nézzünk rá egy egyszerű példát:
CSS3 multi-background
A CSS3 multi-background példa itt megtekinthető.
Forrás:
http://www.w3.org/TR/css3-background/
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.