Vlastnost background-origin

Vlastnost background-origin určuje, jak se bude obrázek na pozadí (přesně obrázek, ne výplň) umisťovat vzhledem k prvku: část obrázku na pozadí bude zasahovat pod okraj, pozadí nebude zasahovat pod okraj nebo se pozadí bude umisťovat pouze nad obsahem prvku (tj. padding odtlačí pozadí).

Syntaxe

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

Hodnoty

Výchozí hodnota: padding-box.

Poznámky

Vlastnost background-origin nefunguje, když background-attachment má hodnotu fixed. Také při background-repeat s hodnotou repeat vlastnost background-origin vždy funguje jako při hodnotě border-box.

Příklad . Výchozí nastavení

Ve výchozím nastavení pozadí nebude zasahovat pod okraj:

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

Результат:

Příklad . Hodnota border-box

Nyní pozadí zasáhne pod okraj:

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

Результат:

Příklad . Hodnota content-box

A nyní se pozadí odsune přes 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;
}

Результат:

Příklad . Při background-repeat: repeat

Při background-repeat s hodnotou repeat vlastnost background-origin vždy funguje, jako při hodnotě border-box, tj. pozadí vždy zasahuje pod okraj:

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

Результат:

Viz také