Style background ominaisuus

Määrittely ja käyttö

Background Ominaisuus asetetaan tai palautetaan lyhennetyssä muodossa enintään kahdeksalla erillisellä taustalla.

Tämän ominaisuuden avulla voit asettaa/palauttaa seuraavat yhden tai useamman (mikä tahansa järjestys):

DOM ominaisuus CSS ominaisuus
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Yllä olevia ominaisuuksia voidaan myös asettaa erillisillä tyyleillä. Suositellaan, että ei-ammattilaiset käyttävät erillisiä ominaisuuksia paremman hallinnan saamiseksi.

Katso myös:

CSS-opas:CSS-tausta

CSS3-opas:CSS3-tausta

CSS-oppaasti:background-ominaisuus

Esimerkki

Aseta dokumentin taustan tyylin:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Kokeile itse

Sivun alaosassa on lisää TIY-esimerkkejä.

Syntaksi

Palauta background-ominaisuus:

object.style.background

Aseta background-ominaisuus:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Ominaisuuden arvo

Arvo Kuvaus
color Aseta elementin taustaväri.
image Aseta elementin taustakuvan.
repeat Aseta taustakuvan toistotapa.
attachment Aseta taustakuvan onko kiinteä vai liukuvan sivun mukana.
position Aseta taustakuvan alkupiste.
size Aseta taustakuvan koko.
origin Aseta taustan sijoitusalue.
clip Aseta taustakuvan piirtämisen alue.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit Periisi elementistä tämän ominaisuuden arvon. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: transparent none repeat scroll 0% 0% auto padding-box border-box
Palautusarvo: Merkkijono, joka ilmaisee elementin taustan.
CSS-versio: CSS1 + CSS3:ssa uudet ominaisuudet

Lisää esimerkkejä

Esimerkki 2

Muuta DIV-elementin taustaa:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Kokeile itse

Esimerkki 3

Asettaa dokumentin taustavärin:

document.body.style.backgroundColor = "red";

Kokeile itse

Esimerkki 4

Asettaa dokumentin taustakuvan:

document.body.style.backgroundImage = "url('img_tree.png')";

Kokeile itse

Esimerkki 5

Asettaa taustakuvan toistuvaksi:

document.body.style.backgroundRepeat = "repeat-y";

Kokeile itse

Esimerkki 6

Asettaa taustakuvan kiinteäksi (ei liiku):

document.body.style.backgroundAttachment = "fixed";

Kokeile itse

Esimerkki 7

Muuttaa taustakuvan sijainnin:

document.body.style.backgroundPosition = "top right";

Kokeile itse

Esimerkki 8

Palauttaa dokumentin taustan ominaisuuden arvon:

document.body.style.background;

Kokeile itse

Selaimen tuki

Background On CSS1 (1996) ominaisuus.

Kaikki selaimet tukevat sitä täysin:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Tuki Tuki Tuki Tuki Tuki Tuki

Kommentit

CSS3 (1999) lisäsi kolme uutta ominaisuutta: