Fundaluri multiple CSS. Definirea dimensiunilor mai multor imagini de fundal. Proprietatea background-size. Imagine de fundal de dimensiune completă..
Partajeaza in Google Classroom
Partajeaza cu Google Classroom
Susține Lectii-Virtuale!
Memorator: Descriere video Descarcă PDF
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:
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:
Exemplu:
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;
}
Navigare în lectii
Cumpara abonament
Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.
