CSS vlastnosť pozadia sa používa na definovanie efektov pozadia na element. Existuje 5 vlastností pozadia CSS, ktoré ovplyvňujú prvky HTML:
- farba pozadia
- obrázok na pozadí
- pozadie-opakovať
- pozadie-príloha
- pozícia na pozadí
1) Farba pozadia CSS
Vlastnosť background-color sa používa na určenie farby pozadia prvku.
Farbu pozadia môžete nastaviť takto:
h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p>Vyskúšajte to
Výkon:
Moja prvá stránka CSS.
Ahoj Javatpoint. Toto je príklad farby pozadia CSS.
2) Obrázok pozadia CSS
Vlastnosť background-image sa používa na nastavenie obrázka ako pozadia prvku. V predvolenom nastavení obrázok pokrýva celý prvok. Môžete nastaviť obrázok na pozadí pre stránku, ako je táto.
body { background-image: url('paper1.webp'); margin-left:100px; }Vyskúšajte to
4) Príloha na pozadí CSS
Vlastnosť background-attachment sa používa na určenie, či je obrázok na pozadí pevný alebo sa posúva so zvyškom stránky v okne prehliadača. Ak nastavíte pevný obrázok na pozadí, obrázok sa nebude počas posúvania v prehliadači pohybovať. Zoberme si príklad s pevným obrázkom na pozadí.
background: white url('bbb.webp'); background-repeat: no-repeat; background-attachment: fixed;Vyskúšajte to
5) Pozícia pozadia CSS
Vlastnosť background-position sa používa na definovanie počiatočnej polohy obrázka na pozadí. V predvolenom nastavení je obrázok na pozadí umiestnený v ľavej hornej časti webovej stránky.
Môžete nastaviť nasledujúce polohy:
- stred
- top
- dno
- vľavo
- správny
background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;Vyskúšajte to