Egenskapen background-origin

Egenskapen background-origin angir hvordan bakgrunnsbildet (spesifikt bildet, ikke fyllingen) skal plasseres i forhold til elementet: en del av bakgrunnsbildet vil trenge inn under kanten, bakgrunnen vil ikke trenge inn under kanten eller bakgrunnen vil bare plasseres over innholdet i elementet (det vil si at padding vil skyve bakgrunnen bort).

Syntaks

cssselector {
  background-origin: padding-box | border-box | content-box;
}

Verdier

Standardverdi: padding-box.

Merknader

Egenskapen background-origin fungerer ikke, når background-attachment har verdien fixed. Også når background-repeat er satt til verdien repeat, vil egenskapen background-origin alltid fungere som med verdien border-box.

Eksempel . Standard

Som standard vil ikke bakgrunnen trenge inn under kanten:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Eksempel . Verdien border-box

Nå vil bakgrunnen trenge inn under kanten:

html<div id="elem"></div>

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Eksempel . Verdien content-box

Og nå vil bakgrunnen skyves bort av padding:

html<div id="elem"></div>

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Eksempel . Med background-repeat: repeat

Med background-repeat satt til repeat vil egenskapen background-origin alltid fungere som med verdien border-box, det vil si at bakgrunnen alltid trenger inn under kanten:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

Se også