Ominaisuus background-image

Ominaisuus background-image asettaa elementille taustakuvan. Oletusarvoisesti kuva peittää koko lohkon kopioillaan, mutta tätä toimintaa voidaan poistaa käyttämällä ominaisuutta background-repeat.

Syntaksi

cssvalitsija {
  background-image: url(kuvan polku);
}

cssvalitsija {
  background-image: none;
}

Arvot

Oletusarvo: none.

Esimerkki

Asetetaan taustakuva käyttäen background-image:ta, estäen sen toistuminen ominaisuudella background-repeat:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Esimerkki

Ilman background-repeat:ia taustakuva peittää koko lohkon:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Esimerkki

Voidaan samanaikaisesti asettaa taustakuva ja taustaväri käyttäen background-color:ia. Tässä tapauksessa alueilla, joilla ei ole taustakuvaa, näkyy taustaväri:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Katso myös