logo

Pozadie CSS

CSS vlastnosť pozadia sa používa na definovanie efektov pozadia na element. Existuje 5 vlastností pozadia CSS, ktoré ovplyvňujú prvky HTML:

  1. farba pozadia
  2. obrázok na pozadí
  3. pozadie-opakovať
  4. pozadie-príloha
  5. 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(&apos;paper1.webp&apos;); 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(&apos;bbb.webp&apos;); 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:

  1. stred
  2. top
  3. dno
  4. vľavo
  5. správny
 background: white url(&apos;good-morning.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; background-position: center; 
Vyskúšajte to