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

CSS DersleriCSS‘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.
Bu da ilginizi çekebilir  Responsive menü nasıl yapılı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.



  • Ahmet

    Çok iyi bir anlatım olmuş teşekkürler.Css’deki bu kod sayesinde tüm sayfalarımda arka planı kullanabiliyorum fakat bi sorum olacak bi sayfada özel olarak arka planı değiştirmek istiyorum yani background kodunu css’den bağımsız bi şekilde o sayfaya özel bi arka plan eklemek için ne yapmam gerektiğini bulamadım.Yardımcı olursanız sevinirim.İyi çalışmalar.

    • Merhaba. Öncelikle geç cevabım için kusura bakmayın. Bir şekilde atlamış olmalıyım. Google’da bu konuyu araştırırken bir şekilde daha önce yazdığım makaleye denk geldim ve göz atma gereği duydum 🙂 Yapmanız gereken işlem inline kod tanımlamak. elemanı içerisinde body{background-image:url(‘resim.gif’;} şeklinde bir kod işinizi görecektir. Veya elemanını düzenleyebilirsiniz : gibi.

      İyi çalışmalar.