background-image Özelliği

background-image özelliği, bir elemana arka plan resmi belirler. Varsayılan olarak resim, kopyalarıyla tüm bloğu kaplayacak şekilde tekrarlanır, ancak bu davranış background-repeat özelliği kullanılarak iptal edilebilir.

Sözdizimi

cssseçici {
  background-image: url(resmin yolu);
}

cssseçici {
  background-image: none;
}

Değerler

Varsayılan değer: none.

Örnek

background-image ile bir arka plan resmi belirleyelim ve background-repeat özelliği ile tekrarını yasaklayalım:

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

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

Результат:

Örnek

background-repeat olmadan arka plan resmi tüm bloğu kaplayacak şekilde tekrarlanır:

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

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

Результат:

Örnek

Aynı anda hem arka plan resmi belirlenebilir hem de background-color kullanılarak arka plan rengi belirlenebilir. Bu durumda, arka plan resminin olmadığı yerlerde arka plan rengi görünecektir:

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

Результат:

Ayrıca Bakınız