A background-image tulajdonság

A background-image tulajdonság egy háttérképet állít be egy elemhez. Alapértelmezésben a kép példányokkal fogja kitölteni a teljes blokkot, azonban ezt a viselkedést megváltoztathatjuk a background-repeat tulajdonsággal.

Szintaxis

cssszelektor {
  background-image: url(kép elérési útja);
}

cssszelektor {
  background-image: none;
}

Értékek

Alapértelmezett érték: none.

Példa

Állítsunk be egy háttérképet a background-image használatával, megakadályozva az ismétlődést a background-repeat tulajdonsággal:

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

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

Результат:

Példa

A background-repeat nélkül a háttérkép példányokkal fogja kitölteni a teljes blokkot:

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

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

Результат:

Példa

Egyszerre is beállíthatunk háttérképet és háttérszínt a background-color használatával. Ebben az esetben ott, ahol nincs háttérkép a háttérszín fog megjelenni:

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

Результат:

Lásd még