background-color vai background?

Kun käytetään background-ominaisuutta antamatta arvoja kaikille taustaan liittyville ominaisuuksille, asetetaan pois jätetyt ominaisuudet oletusarvoihinsa seuraavasti:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;

Otetaan malliksi alla oleva HTML-koodinpätkä:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.



   
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   


Käytetty CSS:
p { background: yellow url('maisema.jpg'); }
div p { background: white; }

Nyt ensimmäisen tekstikappaleen taustaväri on keltainen ja jälkimmäisen valkoinen, mutta maisema.jpg on vain ensimmäisen kappaleen taustakuva. Jälkimmäisellä kappaleella ei ole taustakuvaa, koska "background: white;" antoi oletusarvot kaikille taustaan liittyville ominaisuuksille paitsi taustavärille. Tilanne kuitenkin muuttuu, jos alempaa tyylisääntöä muokataan hieman:

p { background: yellow url('maisema.jpg'); }
div p { background-color: white; }

Tekstikappaleiden taustavärit pysyvät ennallaan, mutta nyt maisema.jpg onkin molempien kappaleiden taustakuva. Ero ei ole suuren suuri, mutta onhan se silti hyvä muistaa, jos taustojen kanssa tulee yllättäviä ongelmia.

Whitelighter kirjoitti:

Kun käytetään background-ominaisuutta antamatta arvoja kaikille taustaan liittyville ominaisuuksille, asetetaan pois jätetyt ominaisuudet oletusarvoihinsa seuraavasti:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;

Otetaan malliksi alla oleva HTML-koodinpätkä:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.



   
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   


Käytetty CSS:
p { background: yellow url('maisema.jpg'); }
div p { background: white; }

Nyt ensimmäisen tekstikappaleen taustaväri on keltainen ja jälkimmäisen valkoinen, mutta maisema.jpg on vain ensimmäisen kappaleen taustakuva. Jälkimmäisellä kappaleella ei ole taustakuvaa, koska "background: white;" antoi oletusarvot kaikille taustaan liittyville ominaisuuksille paitsi taustavärille. Tilanne kuitenkin muuttuu, jos alempaa tyylisääntöä muokataan hieman:

p { background: yellow url('maisema.jpg'); }
div p { background-color: white; }

Tekstikappaleiden taustavärit pysyvät ennallaan, mutta nyt maisema.jpg onkin molempien kappaleiden taustakuva. Ero ei ole suuren suuri, mutta onhan se silti hyvä muistaa, jos taustojen kanssa tulee yllättäviä ongelmia.

Lue lisää

jos käyttää pelkkkää background-pikakirjoitetta eikä anna kaikkia arvoja, eri selaimet saattavat näyttää sivut eri tavalla kuin niin, että määrittää kaikki arvot.