21.4. fejezet: CSS alapismeretek – Hátterek
CSS segítségével egyes elemekhez lehet hátteret hozzárendelni.
background-color: az egyes elemhátterét adja meg (valamelyik fenti módszerrel. A lenti példában a fő-szöveg hátterét világoskéknek adjuk meg.
Paraméter: a szín meghatározása.
body {
background-color: lightblue;
}
background-image: egy weblap hátterének be lehet állítani egy képet is. Érdemes vigyázni az olvashatóságra!
Paraméter: a kép URL-je. Példa:
body {
background-image: url("/valamihatter.gif");
}
background-repeat: a háttérkép ismétlődése.
Paraméter: repeat-x|repeat-y|no-repeat.
Példa a vízszintes ismétlődésre:
body {
background-image: url("/valamihatter.png");
background-repeat: repeat-x;
}
background-position: a háttérkép pozíciója. Akkor érdemes megadni, ha nem ismétlődik.
Paraméter: left|center|right, illetve top|center|bottom.
Az 1. paraméter a vízszintes, míg a 2. a függőleges elhelyezésért felel. A következő példában a háttér a jobb felső sarokba kerül.
body {
background-image: url("/valamihatter.jpg");
background-repeat: no-repeat;
background-position: right top;
}
Megjegyzés: itt sokszor érdemes margókat is használni a jobb elhelyezés végett.
background-attachment: a háttérkép helyét le lehet fixálni, így ez az elem nem lesz görgethető!
Másik lehetséges érték: scroll – azaz a háttér a tartalommal együtt görgethető. Ez az alapérték.
Paraméter: fixed. Példa:
body {
background-image: url("/valamihatter.png");
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: fixed;
}
background: a háttér teljes szabályozása. A fenti paraméterek együttes megadása. A sorrend: color, image, repeat, attachment, position. Példa:
body {
background: #ffffff url("valamihatter.jpg") no-repeat right top;
}
Kicsit bővebben a fenti példa:
body {
background-color: #ffffff;
background-image: url("/valamihatter.jpg");
background-repeat: no-repeat;
background-position: right top;
}
A fejezet leghitesebb forrása: https://www.w3schools.com/css/css_background.asp