CSS arka plan (background) özellikleri
05 Eylül 2015 Furkan Atabaş 21.625 Okunma Yorum Yok

CSS arka plan (background) özellikleri


CSS (3)

Bu yazımda nesnelerin arka planını değiştirmeye yarayan background özelliklerini inceleyeceğiz.  Küçük bir hatırlatma ile bir css kodu yapısı nesne{ özellik: değer;  özellik: değer;  } şeklinde olmalıydı.

Bir html elemanına arka plan özellikleri atayabilmek için yapacağımız işlemler. İlk önce gerekli nesne seçici ile nesneyi seçmek, {} süslü parantezleri eklemek ve parantezler içine cssin background özelliklerini yazmak olacaktır. Şimdi css arka plan özelliklerini görelim


  • background-color :
    Html elemanının arka planının boyanacağı rengi belirler. 3 farklı şekilde renk kodu alır.

    • HEX : #renk_kodu [ Ör: #06D9AC ]
    • RGB: rgb(R,G,B) [ Ör: rgb(255, 96, 200) ]
    • Renk Adı: İngilizce olarak [ Ör: red, green, blue, lightblue, pink, black, whitte ]


  • background-image :
    Nesnenin arkaplanına resim eklemek için kullanılır.
    Değer olarak eklenecek resmin adresi  girilir.
    Eklenecek resmin adresi css dosyasının bulunduğu klasörden verilmelidir.


  • background-repeat : 
    Nesneye eklenen arkaplan reminin tekrar edilip edilmeyeceğini edilecekse de hangi yöne tekrar edileceğini belirler.

    • no-repeat : Arka planı tekrar ettirmez. Resmi 1 kez ekler.
    • repeat :  Arkaplan resmini sağa ve aşağı olarak tekrar tekrar yan yana ekler.
    • repeat-x : Arkaplan resmini sadece yan yana ekleyerek tekrar ettirir.
    • repeat-y : Arkaplana eklenen resmi alt alta tekrar ettirir.


  • background-position :
    Arkaplana eklenen resmin konumu belirler.
    Resim tekrar ediyorsa ilk olarak burada verilen konuma eklenir ve o noktadan tekrar etmeye başlar.

    • left top : Sol üst
    • left center : Sol orta
    • left bottom : Sol alt
    • center top : Orta üst
    • center center : Orta
    • center bottom : Orta alt
    • right top : Sağ üst
    • right center : Sağ orta
    • right bottom : Sağ alt
    • X(Yatay) Y(Dikey) : Burada X ve Y yerine girilebilecek değerler %, px, em ve pt gibi değerlerdir. Girilen değerlerde eksi ( – ) kullanılarak geri konumlandırma yapılabilir.


  • background-attachment :
    Resmin hareketliliğini belirler.

    • scroll : Varsayılan olarak alınan bu değer sayfa aşağı yukarı kaydırıldıkça resmin normal olarak hareket etmesini sağlar.
    • fixed : Resmi diğer background ayarlarına uygun olarak sabitler sayfa kaysa da arkaplan resmi bulunduğu konumda sabit kalır.
    • local : (Tam olarak öğrendiğimde yazacağım)


  • background : 
    Yukarıda yazmış olduğum bütün css background özelliklerini gerçekleştirir.  Tüm bilgilerin girilmesine gerek yoktur. Girilmeyen değerlerde varsayılan ayarları kullanır.
    background: bgcolor  bgimage  bgrepeat  bgposition  bgattachment;
    Hem renk hemde resim değerlerini girdiğimizde resmin tekrar edip arkaplanı doldurmadığı alanlar girilen renk ile doldurulur.


  • background-clip : (CSS3 ile geldi)
    Bu css arkaplan özelliği css3 ile gelmiş olan arkaplanın doldurulacak alanını belirler.
    Örnek vermek gerekir ise nesne içerisinde padding kullanıldığında paddingli alanın boyanmasını istemiyor sadece içeriğin boyanmasını istiyorsak kullanabiliriz.
    Yada solid olmayan dashed veya dotted türünden kenarlıklar kullanıyorsak kenarlığın boş kalan alanlarını doldurmak istemediğimizde kullana biliriz.

    • border-box : Tüm nesneyi boyar.
    • padding-box : Nesnenin kenarlıklarında boş kalan alanları boyamaz.
    • content-box : Sadece içeriği boyar padding ve border alanlarında boyama yapmaz.


 

  • background-origin : (CSS3 ile geldi)
    background-clip ile aynı işlemi gören bu özellik arkaplana eklenen “resimler” için geçerlidir.
    background-attachment özelliği fixed olduğunda hiçbir etkisi yoktur.

    • border-box : Arkaplan resmini border dan kalan boşluklara doldurur.
    • padding-box : (Varsayılan) Arkaplan resmini nesne içine ekler.
    • content-box : Arkaplan resmini sadece içeriğin içine ekler padding alanlarına eklemez.


 

  • background-size : (CSS3 ile geldi)
    css background özelliği ile atanan arkaplan resminin boyutunu ayarlar.

    • auto :  Varsayılan değerdir. Otomatik olarak ayarlama yapar
    • ?Width ?Height : %, px gibi ölçüler ile genişlik ve yükseklik verilebilir (150px 50px)
    • cover : Resmi ölçeklendirerek arkaplanı doldurmaya çalışır. Resim nesneden büyükse dışarıya taşar fakat taşan kısımlar gözükmez.
    • contain : Resmi bulunduğu nesnenin kenarlarına gelecek şekilde büyültür yada küçültür. Taşma yapmaz resmi sığdırmaya çalışır ama resim kare nesne dikdörtgen ise nesnenin bir kısmı boş kalacaktır.


Son olarak küçük bir rica (: Yazımı faydalı bulduysanız +1 lemeyi  sosyal medyada paylaşmayı unutmayın.