Omadus background-image

Omadus background-image määrab elemendi taustapildi. Vaikimisi kaetakse plokk pildi koopiatega, kuid seda käitumist saab muuta omadusega background-repeat.

Süntaks

cssselektor {
  background-image: url(pildi asukoht);
}

cssselektor {
  background-image: none;
}

Väärtused

Väärtus	Kirjeldus
`url`	Faili asukoht pildiga. Pildi nimetus võib olla topelthoobade sees, üksikhõbade sees või ilma hõbadeta.
`none`	Eemaldab elemendi taustapildi.

Vaikeväärtus: none.

Näide

Määrame taustapildi kasutades background-image, keelates selle kordumise omadusega 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;
}

Результат:

Näide

Ilma background-repeat'ita taustapilt kaetakse kogu plokk:

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

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

Результат:

Näide

Saab samaaegselt määrata taustapildi ja taustavärvi kasutades background-color. Sel juhul, kus taustapilti ei ole, näeb taustavärv:

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;
}

Результат:

Vaata ka

omadus background,
mis on tausta lühendomadus