CSS Arka Plan Resmi Tekrarı
CSS arka plan tekrarı
Varsayılan olarak, background-imageözellik bir görüntüyü hem yatay hem de dikey olarak tekrarlar.
Bazı görüntüler yalnızca yatay veya dikey olarak tekrarlanmalıdır, aksi takdirde aşağıdaki gibi garip görünecektir:
Örnek
body
{
background-image: url("gradient_bg.png");
}
Yukarıdaki resim yalnızca yatay olarak tekrarlanırsa ( background-repeat: repeat-x;), arka plan daha iyi görünecektir:
Örnek
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
İpucu: Bir görüntüyü dikey olarak tekrarlamak içinbackground-repeat: repeat-y;
CSS arka plan tekrarı: tekrar yok
background-repeatArka plan görüntüsünün yalnızca bir kez gösterilmesi de özellik tarafından belirtilir :
Örnek
Arka plan resmini yalnızca bir kez göster:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Yukarıdaki örnekte, arka plan resmi metinle aynı yere yerleştirilmiştir. Metni çok fazla rahatsız etmeyecek şekilde görüntünün konumunu değiştirmek istiyoruz.
CSS arka plan konumu
Özellik background-position, arka plan görüntüsünün konumunu belirtmek için kullanılır.
Örnek
Arka plan resmini sağ üst köşeye yerleştirin:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}