Eienskap background-image

Die eienskap background-image stel 'n agtergrondbeeld vir 'n element. Standaard sal die beeld die hele blok met sy kopieë teël, maar hierdie gedrag kan gekanselleer word met die eienskap background-repeat.

Sintaksis

cssselektor {
  background-image: url(pad na beeld);
}

cssselektor {
  background-image: none;
}

Waardes

Standaardwaarde: none.

Voorbeeld

Laat ons 'n agtergrondbeeld stel met background-image, en die herhaling daarvan verbied met die eienskap 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;
}

Результат:

Voorbeeld

Sonder background-repeat sal die agtergrondbeeld die hele blok teël:

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

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

Результат:

Voorbeeld

Jy kan gelyktydig 'n agtergrondbeeld stel en 'n agtergrondkleur stel met background-color. In hierdie geval, waar daar geen agtergrondbeeld is nie, sal die agtergrondkleur sigbaar wees:

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

Результат:

Sien ook