Háttérformázások

Tekintsük át példákkal a CSS background szintakszisát és nézzünk meg egy-két hozzájuk kötődő tulajdonságot.

background-color

Ennek segítségével a háttér színét tudjuk beállítani.

Példa:

background-color: #B0C4DE;

background-image

Egy képet tehetünk be a segítségével háttérnek.

Példa:

background-image: url(background.png);

background-repeat

A background-repeat segítségével definiálhatjuk, hogy a háttérképünk ismétlődjön vagy sem.

Példa:

background-repeat: 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

background-position

A background-position -el pedig megadhatjuk, hogy hova kerüljön a háttérnek beállított képünk.

Példa:

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 pontos helyet is, Pl. 50px 200px (x, y tengely irányában)

background-attachment

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.

Példa:

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.