CSS Arka Plan Tekrarı

CSS background-repeat

Varsayılan olarak,background-image Özellikler hem yatay hem de dikey yönde resimleri tekrarlar.

Bazı resimler yalnızca yatay veya dikey yönde tekrarlanmalıdır, aksi takdirde garip görünebilirler, aşağıdaki gibi:

Örnek

body {
  background-image: url("gradient_bg.png");
}

Kendi Kendine Deney

Eğer yukarıdaki resim sadece yatay yönde tekrarlanıyorsa (background-repeat: repeat-x;) ise, arka plan daha iyi görünecektir:

Örnek

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Kendi Kendine Deney

İpucu:Eğer resim dikey yönde tekrarlanacaksa, ayarlayın background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat Özellik, arka plan görselinin sadece bir kez gösterilmesini de belirleyebilir:

Örnek

Arka plan görseli sadece bir kez gösterilir:

body {
  background-image: url("tree.png");
  background-repeat: bir kez tekrar etme;
}

Kendi Kendine Deney

Örnekte, arka plan görseli ve metin aynı konumdadır. Görselin konumunu değiştirmek istiyoruz, çünkü görsel metni çok fazla rahatsız ediyor.

CSS background-position

background-position Özellik, arka plan görselinin konumunu belirler.

Örnek

Arka plan görselini sağ üst köşeye yerleştirin:

body {
  background-image: url("tree.png");
  background-repeat: bir kez tekrar etme;
  background-position: sağ üst;
}

Kendi Kendine Deney