Fundaluri multiple CSS. Imagine Hero. Proprietatea CSS background-origin. Valorile proprietății background-origin: border-box, padding-box, content-box.

Hero Image

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;
}