Háttér stílusok CSS-sel

Most, hogy már tudod a CSS alapjait, itt az ideje, hogy elkezd szépíteni az oldaladat. Talán a háttér a leglátványosabb, ezért kezdjük azzal. A legegyszerűbb az egyszínű háttér, ami lehet átlátszó is. Itt a kódja:

body {background-color:#FEE84B;}

Eddigi ismereteid alapján rájöhetsz, hogy itt a body (=az egész oldal) a szelektor, ennek adunk háttérszínt (background-color). A háttérszín értéke háromféle lehet:

• hexadecimális kód (olyan, mint a példában, ezt használják leggyakrabban, mindig van kettőskereszt, utána pedig a hat szám vagy betű)
• a szín neve angolul - nyilván nem működik mindegyik, de elég sok igen (van pl. gold és silver is), itt nem kell a kettőskereszt
• RGB színkód, ezt ritkán használják, de ha mégis ilyet szeretnél, így tudod megadni: rgb(81,249,115)

Háttérszínt természetesen bárminek lehet adni, akár egy szónak is, de egy egész bekezdésnek is, vagy egy táblázatnak.

Tipp: átlátszó háttérhez ezt írd be:

body {background-color:transparent;}

Háttérkép CSS-sel

Háttérképet is bárminek lehet adni (szövegnek is!), de leggyakrabban ez egész oldalnak szoktak hátteret adni, hogy egységes legyen. Töltsd fel a képet, és már be is másolhatod az URL címét a kódba:

body {background-image:url('KÉP URL CÍME');}

Ha így nem változtatsz a kódon, miután betetted a kép címét, akkor automatikusan ismétlődik majd a háttérképed minden irányban.

Tipp: figyelj rá, hogy olyan hátteret válassz, amitől a szöveg olvasható marad!

Vannak olyan képek, amiket érdemes csak az egyik irányban ismétlődőre állítani, pl. egy színátmenetes háttér (mint a példában) nem biztos, hogy jó lenne többször egymás alatt. Itt is van a kódja:

body {background-image:url('KÉP URL CÍME');
background-repeat:repeat-x;
}

A background-repeat értéke négyféle lehet:

• repeat (minden irányba ismétlődő)
  
• repeat-x (vízszintesen ismétlődő)
  
• repeat-y (függőlegesen ismétlődő)
  
• no-repeat (nincs ismétlés)
  

Néha az is előfordul, hogy azt szeretnéd, hogy a háttered ne ismétlődjön, de ne a bal felső sarokból induljon, mert zavaró lehet, ha pont a szöveg alatt van a kép. Ezen azzal segíthetsz, hogy megadod a háttérképed pozícióját, bár itt sajnos csak a legalapvetőbbek működnek: baloldal-jobboldal, fent-lent és ezeknek a variációi. A példában szereplő kép jobbra lent van:

body {background-image:url('KÉP URL CÍME');
background-repeat:no-repeat;
background-position:right bottom;
}

<< vissza a CSS kódokhoz!