CSS ile Arkaplan (Background) Biçimlendirme – Tasarım Kodlama
CSS

CSS ile Arkaplan (Background) Biçimlendirme

Web sayfanızda bulunan öğeler için arkaplan biçimlendirmesi yapmak için CSS’ te çeşitli Background özellikleri uygulanabilir. Bu özellikler:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Yukarıdaki özelliklerin açıklamaları ve örnek kullanımlarına bakalım.

 

CSS background-color Özelliği:

background-color özelliği, bir öğenin arka plan rengini belirtir.

Sayfanın arka plan rengi şöyle ayarlanır:

Yukarıdaki örnekte arkaplan için renk, rengin adı ile belirtilmiştir. CSS’ te renk bildirimi çeşitli yöntemlerle yapılabilir. CSS Renklerle Çalışma konusu için bu sayfayı okumanınızı öneririz.

Arkaplan rengi sadece sayfa için kullanılmaz. Aşağıdaki örnekte <h1>, <p>, <h2> ve <div> öğeleri için arkaplan rengi ayarlamasının nasıl yapılacağı gösterilmiştir.

Ekran Çıktısı:

 

CSS background-image Özelliği:

background-image özelliği, bir öğenin arka planı olarak kullanılacak bir görüntü belirtir.

Varsayılan olarak, görüntü tekrarlanır, böylece tüm elemanı kapsar.

Bir sayfanın arkaplan resmi şu şekilde ayarlanabilir:

Not:  Bir arka plan resmi kullanırken, kullanıcıların metni okumasını zorlaştıracak resimleri kullanmamaya özen gösterin.

CSS background-repeat Özelliği:

Varsayılan olarak sayfaya eklenen arkaplan resmi yatayda ve dikeyde tekrarlanır. Bu durum kimi zaman istenmez. Bazı durumlarda eklenen resmin tekrarlanmaması, sadece yatay eksende tekrar etmesi veya sadece dikey olarak tekrar etmesi istenebilir.

Bu durumda background-repeat özelliği kullanılır.

Aşağıdaki örnekte background-repeat özelliğine değer verilmeyerek hem yatay hem dikeyde tekrar etmesi sonucu oluşan görüntüyü inceleyelim.

Ekran Çıktısı:

 

Şimdi de background-repeat özeliğini kullanarak resmin sadece x ekseni yani yatayda tekrarını sağlayarak aradaki farkı inceleyelim. (repeat-x)

 

Yukarıdaki örnekte görüldüğü gibi background-repeat: repeat-x; özelliği ile resmin sadece yatayda tekrarı sağlanmıştır. Yukarıdaki kodlar sonucu ortaya çıkan ekran görüntüsünü incelediğinizde resmin orjinal halinin dar olduğunu göreceksiniz.

Resmin yatay eksende tekrarı sonucu sayfayı yatayda kapladığını göreceksiniz. Bu işlem resim dosya boyutlarının çok fazla olmaması ve sayfanın daha erken yüklenmesini sağlayacaktır.

 

Resmin sadece dikey eksende tekrarı için;

background-repeat: repeat-y;

Resmin yatay ya da dikeyde tekrar etmesini engellemek için ise;

background-repeat: no-repeat; kodlarını eklemek gerekecektir.

 

CSS background-attachement Özelliği:

Arka plan resminin sabitlenmesini yani kaydırma çubuğu kullanılarak sayfa yukar aşağı hareket ettirilse bile resmin sabit bir konumda kalmasını isterseniz ;

background-attachment:fixed; özelliğinden faydalanabilirsiniz.

Aşağıdaki kodları ve ekran çıktısını inceleyin.

Ekran Görüntüsü:

 

Yukarıdaki çıktıyı incelediğinizde sayfadaki Tasarım Kodlama logosunun scroll ile aşağı yukarı hareketi sonucu konumunun değişmediğini ve sabit kaldığını göreceksiniz.

Not: Deneme yaparken sayfanıza ait resmi eklemeyi unutmayın.

 

CSS background-position Özelliği:

CSS ile sayfalarınıza eklediğiniz ressimleri background-position özelliğini kullanarak konumlandırabilirsiniz.

background-position özelliğine aşağıdaki değerler verilebilir.

left top
left center 
left bottom 
right top
right center 
right bottom 
center top 
center center
center bottom

Örnek:

Çıktı:

Yorum bırak