Fundaluri multiple CSS. Definirea dimensiunilor mai multor imagini de fundal. Proprietatea background-size. Imagine de fundal de dimensiune completă..

Definirea dimensiunilor mai multor imagini de fundal (Define Sizes of Multiple Background Images)

Proprietatea background-size acceptă, de asemenea, mai multe valori pentru dimensiunea fundalului (folosind o listă separată de virgule), atunci când lucrați cu mai multe fundaluri.

Următorul exemplu are trei imagini de fundal specificate, cu o dimensiune de fundal (background-size) diferită pentru fiecare imagine:

Exemplu:

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Imagine de fundal de dimensiune completă (Full Size Background Image)

Acum vrem să avem o imagine de fundal (background image) pe un site web care să acopere întreaga fereastră a browserului în orice moment.
Cerințele sunt următoarele:

Completează întreaga pagină cu imaginea (fără spațiu alb).
Scalați imaginea după caz.
Centrați imaginea pe pagina.
Nu provocați bare de defilare (scrollbars).

Următorul exemplu arată cum se face; Utilizați elementul <html> (elementul <html> este întotdeauna cel puțin înălțimea ferestrei browserului). Apoi, setați un fundal fix și centrat pe el. Apoi ajustați-i dimensiunea cu proprietatea background-size:

Exemplu:

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}