Styl pozadí Vlastnost
Příklad
Upravte styl pozadí dokumentu:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost pozadí nastavuje nebo vrací až osm samostatných vlastností pozadí ve zkrácené formě.
Pomocí této vlastnosti můžete nastavit/vrátit jedno nebo více z následujících (v libovolném pořadí):
- barva pozadí
- obrázek na pozadí
- pozadí-opakování
- pozadí-příloha
- pozadí-pozice
- velikost pozadí
- pozadí-původ
- klip na pozadí
Výše uvedené vlastnosti lze také nastavit pomocí samostatných vlastností stylu. Pro nepokročilé autory se pro lepší ovladatelnost důrazně doporučuje použití samostatných vlastností.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Poznámka: Viz podpora jednotlivých prohlížečů pro každou hodnotu níže.
Syntax
Vraťte vlastnost pozadí:
object.style.background
Nastavte vlastnost pozadí:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Hodnoty vlastností
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technické údaje
| Výchozí hodnota: | transparentní žádný repeat scroll 0% 0% auto padding-box border-box |
|---|---|
| Návratová hodnota: | Řetězec představující pozadí prvku |
| Verze CSS | CSS1 + nové vlastnosti v CSS3 |
Další příklady
Příklad
Změna pozadí prvku DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Příklad
Nastavte barvu pozadí dokumentu:
document.body.style.backgroundColor = "red";
Příklad
Nastavení obrázku na pozadí dokumentu:
document.body.style.backgroundImage = "url('img_tree.png')";
Příklad
Nastavte obrázek na pozadí tak, aby se neopakoval:
document.body.style.backgroundRepeat = "repeat-y";
Příklad
Nastavte obrázek na pozadí, který má být opraven (neposouvá se):
document.body.style.backgroundAttachment = "fixed";
Příklad
Změňte polohu obrázku na pozadí:
document.body.style.backgroundPosition = "top right";
Příklad
Vraťte hodnoty vlastností pozadí dokumentu:
document.body.style.background;
Související stránky
CSS tutoriál: CSS Background
CSS3 tutoriál: CSS3 Backgrounds
CSS reference: vlastnost pozadí