Fundaluri multiple CSS. Definirea dimensiunilor mai multor imagini de fundal. Proprietatea background-size. Imagine de fundal de dimensiune completă..
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
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).
Exemplu:
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}