De eigenschap background-origin

De eigenschap background-origin bepaalt hoe de achtergrondafbeelding (specifiek de afbeelding, niet de kleurvulling) ten opzichte van het element wordt geplaatst: een deel van de achtergrondafbeelding zal onder de rand komen, de achtergrond zal niet onder de rand komen of de achtergrond wordt alleen boven de inhoud van het element geplaatst (dat wil zeggen, padding zal de achtergrond wegdrukken).

Syntaxis

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

Waarden

Standaardwaarde: padding-box.

Opmerkingen

De eigenschap background-origin werkt niet, wanneer background-attachment de waarde fixed heeft. Ook bij background-repeat met de waarde repeat werkt de eigenschap background-origin altijd zoals bij de waarde border-box.

Voorbeeld . Standaard

Standaard komt de achtergrond niet onder de rand:

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

Результат:

Voorbeeld . De waarde border-box

Nu komt de achtergrond onder de rand:

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

Результат:

Voorbeeld . De waarde content-box

En nu wordt de achtergrond weggedrukt door de 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;
}

Результат:

Voorbeeld . Bij background-repeat: repeat

Bij background-repeat met de waarde repeat werkt de eigenschap background-origin altijd zoals bij de waarde border-box, dat wil zeggen de achtergrond komt altijd onder de rand:

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

Результат:

Zie ook