Vlastnosť background-origin
Vlastnosť background-origin určuje,
ako sa bude obrázok pozadia (konkrétne obrázok,
nie výplň) umiestňovať vzhľadom na
prvok: časť obrázka pozadia bude prenikať
pod okraj, pozadie nebude prenikať pod okraj
alebo pozadie bude umiestnené len nad obsahom
prvku (to znamená, že padding
odtlačí pozadie).
Syntax
selektor {
background-origin: padding-box | border-box | content-box;
}
Hodnoty
| Hodnota | Popis |
|---|---|
border-box |
Obrázok pozadia prenikne pod okraj. |
padding-box |
Obrázok pozadia nebude prenikať pod okraj. |
content-box |
Obrázok pozadia bude len nad obsahom. |
Predvolená hodnota: padding-box.
Poznámky
Vlastnosť background-origin nefunguje,
keď background-attachment
má hodnotu fixed. Tiež pri background-repeat
s hodnotou repeat vlastnosť background-origin
vždy funguje ako pri hodnote border-box.
Príklad . Predvolené
Predvolene pozadie nebude prenikať pod okraj:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Príklad . Hodnota border-box
Teraz pozadie prenikne pod okraj:
<div id="elem"></div>
#elem {
background-origin: border-box;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Príklad . Hodnota content-box
A teraz sa pozadie odsune cez padding:
<div id="elem"></div>
#elem {
background-origin: content-box;
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Príklad . Pri background-repeat: repeat
Pri background-repeat s hodnotou repeat vlastnosť
background-origin vždy funguje,
ako pri hodnote border-box, to znamená, že pozadie
vždy preniká pod okraj:
<div id="elem"></div>
#elem {
background-repeat: repeat;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 350px;
height: 300px;
}
:
Pozrite tiež
-
vlastnosť
background-clip,
ktorá určuje pozíciu obrázka pozadia aj výplne -
vlastnosť
background,
ktorá je skrátenou vlastnosťou pre pozadie