Css Background Kullanımı

Bu yazımda Css’te background özelliklerini ve bunları nasıl kullanabileceğimizi öğreneceğiz. Background özellikleri ile arkaplan rengi verme, arkaplan’a resim yerleştirme vb.. işlemlerimizi yapabiliriz.

Şimdi tek tek bu özellikleri uygulamalı bir şekilde inceleyelim.

Bu özellik ile bir html etiketine veya sayfanın tamamına arkaplan rengi verebiliriz.

Örneğin iki adet h2 etiketi tanımlayıp birincinin arkaplan rengini sarı, ikincinin arkaplan rengini kırmızı yapalım ve tarayıcıdaki durumunu inceleyelim.

css-dersleri-background-color-kullanimi

CSS BACKGROUND İMAGE ÖZELLİĞİ

Bu özellik ile bir html etiketine veya sayfanın tamamına arkaplan resmi koyabiliriz.

Örneğin, body etiketinin arkaplanına 100×100 px’lik bir resim yerleştirelim ve tarayıcıdaki durumunu inceleyelim.

css-dersleri-background-image-kullanimi

Gördüğünüz gibi resmin boyutu küçük olduğu için, varsayılan olarak sayfa tamamen dolana kadar resim x ve y ekseninde kendini tekrar ediyor.

Bazı durumlarda resmin sadece x ekseninde veya sadece y ekseninde tekrar etmesini isteyebiliriz. Bu gibi durumlarda background-repeat özelliğini kullanmamız gerekiyor.

CSS BACKGROUND REPEAT ÖZELLİĞİ

Bu özellik ile resimlerin tekrar edip etmeme durumlarını ayarlayabiliriz.4 değer verebiliriz. Bunlar;

     ► repeat-x : Resim x ekseninde tekrar eder.

     ► repeat-y : Resim y ekseninde tekrar eder.

     ► no-repeat : Resim tekrar etmez.

     ► repeat : Varsayılan değerdir.Resim x ve y eksenlerinde tekrar eder.

Şimdi body etiketinin arkaplanına resim ekleyelim ve bu durumları örnekleyelim.

css-dersleri-background-repeat-kullanimi

Gördüğünüz gibi resim sadece x ekseninde tekrar ediyor.

css-dersleri-background-repeat-kullanimi-1

Gördüğünüz gibi resim sadece y ekseninde tekrar ediyor.

css-dersleri-background-repeat-kullanimi-2

Gördüğünüz gibi resim tekrar etmiyor.

Bu özellik ile yerleştirmiş olduğumuz resmin sayfadaki konumunu belirleyebiliriz. 5 değer verebiliriz. Bunlar;

     ► top : üstte

     ► bottom : altta

     ► right : sağda

     ► left : solda

     ► center : ortada

Şimdi sayfaya biraz yazı ekleyelim ve body etiketinin arkaplanına resim yerleştirelim.

background-position özelliği ile resmin sayfanın sağ üst köşede konumlandırılmasını sağlayalım.

css-dersleri-background-position-kullanimi

Gördüğünüz gibi resim sağ üst köşede konumlandırıldı.

CSS BACKGROUND ATTACHMENT ÖZELLİĞİ

Bu özellik ile arkaplana yerleştirdiğimiz resmin sabit kalmasını sağlayabiliriz.

Örneğin sayfamızda uzunca bir yazı var diyelim ve arkaplan’a bir resim yerleştirdik. Yazıyı okurken scroll ile aşağı indikçe resimde yukarda kalacağı için artık gözükmeyecektir.

background-attachment özelliğine fixed değeri verdiğimiz takdirde resim bulunduğu yere sabitlenecektir. Yazıyı okurken istediğiniz kadar aşağılara inin resim hep ekranımızda görünecektir.

Resmi sağ üst köşede konumlandırıp, background-attachment özelliğine fixed değeri vererek sabitliyoruz.

css-dersleri-background-attachment-kullanimi-1

Scroll ile aşağı doğru inildiğinde resim olduğu yerde sabit kalacaktır.

css-dersleri-background-attachment-kullanimi-2

CSS BACKGROUND SİZE ÖZELLİĞİ

Bu özellik ile arkaplana yerleştirdiğimiz resmin boyutlarını ayarlayabiliriz. Verebileceğimiz değerleri bir örnek üzerinde inceleyelim.

5 adet <div> etiketi oluşturalım ve genişlik yükseklik değerine 250px verelim.

Div’in arkaplanına yerleştireceğimiz resim ise 140px genişliğinde 200px yüksekliğinde.

     ► auto : Varsayılan değerdir. Resim orjinal boyutlarında yerleştirilir.

css-dersleri-background-size-kullanimi-1

     ► uzunluk değerleri : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır.

Örneğimizde resmin genişliği 180px yüksekliği 60px olacak şekilde yerleştirildi.

css-dersleri-background-size-kullanimi-2

     ► yüzde olarak değer : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır.

Örneğimizde resmin genişliği ve yüksekliği içerisinde bulunduğu div’in yarısını kaplayacak şekilde yerleştirildi.

css-dersleri-background-size-kullanimi-3

     ► contain : Resmin genişlik ve yükseklik değerlerinden büyük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.

Örneğimizde resmin yüksekliği (200px) genişliğinden (140px) büyük olduğu için, div içerisini kaplayacak biçimde y ekseninde genişleyecek ve en boy oranının değişmemesi için genişlik değeride değişecektir.

css-dersleri-background-size-kullanimi-4

     ► cover : Resmin genişlik ve yükseklik değerlerinden küçük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.

Örneğimizde resmin genişliği (140px) yüksekliğinden (200px) küçük olduğu için resim, div içerisini kaplayacak biçimde x ekseninde genişleyecek ve en boy oranının değişmemesi için yükseklik değeride değişecektir.

css-dersleri-background-size-kullanimi-5

  ¡   Cover değeri kullanıldığında genellikle background-position : center center; özelliği ile birlikte kullanılıyor.

Bu özellik ile bir etikete vermiş olduğumuz arkaplan resminin başlangıç alanını belirleyebiliriz. 3 değer verebiliriz. Bunlar;

     ► padding-box : Varsayılan değerdir. Resmin padding alanından başlamasını sağlar.

     ► border-box : Resmin border alanından başlamasını sağlar.

     ► content-box : Resmin içerik alanından başlamasını sağlar.

Verebileceğimiz değerleri bir örnek üzerinde inceleyelim.

3 adet div etiketi oluşturalım ve arkaplanına bir resim yerleştirelim.

background-origin özelliğine 3 değeri de verip durumlarını tarayıcıda inceleyelim.

css-dersleri-background-origin-kullanimi

CSS BACKGROUND CLİP ÖZELLİĞİ

Bu özellik ile bir etikete vermiş olduğumuz arkaplan renginin başlangıç alanını belirleyebiliriz. 3 değer verebiliriz. Bunlar;

     ► padding-box : Varsayılan değerdir. Rengin padding alanından başlamasını sağlar.

     ► border-box : Rengin border alanından başlamasını sağlar.

     ► content-box : Rengin içerik alanından başlamasını sağlar.

Verebileceğimiz değerleri bir örnek üzerinde inceleyelim.

3 adet div etiketi oluşturalım ve arkaplan rengini mavi yapalım.

background-clip özelliğine 3 değeri de verip durumlarını tarayıcıda inceleyelim.

css-dersleri-background-clip-kullanimi

Son olarak, anlattığımız bu özelliklerin tamamını daha kısa yazmak için sadece background özelliğinide kullanabilirsiniz.

Şu şekilde kullanıyoruz.

Tarayıcı uyumluluğu ile ilgili bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın