CSS Background (háttér)

A CSS <background> tulajdonságai lehetővé teszik a színek, képek és gradiensek beállítását az elemek hátterében. Segítségével egyszerű keretektől egészen komplex vizuális effektekig sokféle megoldást alkalmazhatunk.

Háttérszínek

A legegyszerűbb háttér a <background-color> használatával adható meg. Bármilyen színt használhatunk HEX, RGB, HSL vagy név szerinti formátumban.

Az alábbi példában világoskék háttérszínt adunk egy <div> elemnek:

Háttérképek és gradiensek

A <background-image> segítségével képet állíthatunk be, míg a <background> rövidített szintaxissal akár gradienseket is megadhatunk. A képek ismétlése és méretezése is szabályozható.

Háttér pozícionálás és méretezés

A <background-repeat>, <background-size> és <background-position> tulajdonságok segítségével pontosan meghatározhatjuk, hogyan jelenjen meg a háttérkép. Például a cover méret kitölti a teljes elemet, míg a contain megtartja az arányokat.

Több háttérréteg

A CSS-ben egyszerre több háttérréteget is beállíthatunk. Például kombinálhatunk képeket és gradienseket egyetlen background deklarációban.

Background-attachment

A background-attachment tulajdonsággal szabályozhatjuk, hogy a háttér fixen maradjon a viewportban (parallax hatás), vagy együtt mozogjon a tartalommal.

Rövidített background használata

A background tulajdonság rövidített szintaxissal egy sorban adhatjuk meg a színt, képet, pozíciót, méretet, ismétlést és attachment értékeket.

Tippek a háttér használatához

A háttér tulajdonságokat számos kreatív módon kombinálhatjuk. Íme néhány hasznos tipp:

• Használj gradienseket, ha modern és reszponzív megoldást keresel a háttérhez.
• A nagy méretű háttérképeket optimalizáld, hogy ne lassítsák a betöltést.
• Kombinálj több háttérréteget a <background> rövidítéssel, hogy komplexebb hatást érj el.