CSS background és újdonságok

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

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/

Creative Commons Licenc
CSS background és újdonságok  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...