CSS Background Nedir? Nasıl Kullanılır?

CSS‘in Background satırı arka plan görsellerimizin seçimini, yerleşimini, boyutunu ve pozisyonunu yönetmemizi sağlar.

Bu makalemizde web tasarımında kullanabileceğimiz tüm arka plan terimlerini tanıyacağız. Background’a etki edebilecek background-image, background-color, background-repeat, background-attachment ve background-position değerlerini de örneklendireceğiz.

Background

Sayfanızdaki herhangi bir objeye arka plan belirlemek için background-image veya background-color gibi kodları kullanıyoruz.

Örneklendirelim :

background-image:url('ornek.gif');
background-color:red;

Bu işlemi JavaScript ile yapacak olsaydık,

object.style.backgroundImage="url(ornek.gif)"

kodunu kullanacaktık. Fakat JavaScript arka plan seçimi an itibariyle pek popüler değildir.

Background-repeat

Bu alan için X, Y, Repeat ve No-repeat terimlerini girebiliyoruz.

• Repeat-X : dikey olarak arka planı tekrarlatır.


• Repeat-Y : yatay olarak arka planı tekrarlatır.


• Repeat : Her iki yönde arka plan tekrarlanır.


• No-repeat : Arka plan tekrarlanmaz.

Örneklendirelim :

background-repeat:repeat-x;

Bu işlemi JavaScript ile yapacak olsaydık;

object.style.backgroundRepeat="repeat-x"

Background-attachment

Bu kod ile de arka planın yerleşimini belirliyoruz. Tanımlamasına scroll, local ve fixed yazılabiliyor.

• Fixed : Siz kaydırma çubuğunu aşağıya kaydırdığınız sürece arka plan da kayar.


• Local : Arka plan sadece bağlı olduğu objeye uygulanır.


• Scroll : Klasik yöntem. Varsayılan değer.

Örneklendirelim :

background-attachment:local;

Bu işlemi JavaScript ile yapacak olsaydık;

object.style.backgroundAttachment="local"

Background-position

İsminden de anlaşılacağı gibi arka planın pozisyonunu belirtmemizi sağlıyor. Varsayılan değeri 0% 0% olarak belirlenir.

Dört tip değer kullanabiliyoruz. Yerleşim kelimeleri, koordinatlar, yüzdeler ve inherit. Buradaki ilk değer yatay, ikinci değer dikey pozisyonu temsil eder.

• Yerleşim kelimeleri : left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom. Burada alanlardan birini boş bırakırsanız o kısım center olarak algılanacaktır.


• Koordinatlar : Arka planın nerede gözükmesini istiyorsak değerlerini giriyoruz. Örneğin yatay 50 piksel, dikey 20 piksel açık kısım bırakalım : 50px 20px


• Inherit : Obje arka plan pozisyon değerini bağlı olduğu elementten direkt olarak alır.

Örneklendirelim :

Background-position:left;

Bu işlemi JavaScript ile yapacak olsaydık;

object.style.backgroundPosition="left"

Hatırlatma

Uygulamanın geneli tüm web görüntüleyicilerde çalışırken background-position IE7 ve öncesinde çalışmaz.

CSS Background Nedir? Nasıl Kullanılır?