Fundaluri multiple CSS. Imagine Hero. Proprietatea CSS background-origin. Valorile proprietății background-origin: border-box, padding-box, content-box.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
De asemenea, puteți utiliza diferite proprietăți de fundal (background) pe un <div> pentru a crea hero image (o imagine mare cu text) și să o plasați acolo unde doriți.
Exemplu:
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
Proprietatea CSS background-origin
Proprietatea CSS background-origin specifică unde este poziționată imaginea de fundal.
Proprietatea are trei valori diferite:
- border-box - imaginea de fundal pornește din colțul din stânga sus al border-ului.
- padding-box - (implicit) imaginea de fundal pornește din colțul din stânga sus al marginii padding-ului.
- content-box - imaginea de fundal pornește din colțul din stânga sus al conținutului.
Următorul exemplu ilustrează proprietatea background-origin:
Exemplu:
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}