Arkaplan, CSS‘nin çekirdek parçalarından birisidir. Az da olsa bilmeniz gereken en temellerindendir. Bu makalede, CSS’de arkaplanların temel özelliklerini öğreneceğiz. Arkaplanlar kullanılarak yapılabilecek bazı hileleri de makalede bulabilirsiniz. Ayrıca CSS3’ün yeni arkaplan özellikleri de makalede mevcut. Aslında bu adreste yazılmış olan makeleyi Türkçe’ye çevirip kendi sitemde yayınlamıştım. Kodaman’da da yayınlamak istedim.
CSS2’de Arkaplanlarla Çalışmak
Gözden Geçirme
CSS2’de 5 ana arkaplan özelliğimiz var. Bunlar;
- background-color : arkaplanın doldurulacağı düzgün rengi belirler.
- background-image : arkaplan için bir imaj belirler.
- background-position : belirlenen imajın arkaplanda nereye konumlandırılacağını belirler.
- background-repeat : belirlenen imajın arkaplanda tekrar etme durumunu belirler.
- background-attachment : belirlenen imajın arkaplanda kayma durumunu belirler.
Bu özellikler background denilen daha kısa bir özellik altında toplanabiliyor.Not edilmesi gereken önemli nokta, background özelliği, uygulandığı elemanın içeriğini (content) , iç boşluklarını (padding) ve kenarlıklarını (border) kapsar. Elemanın dış boşluklarını (margin) kapsamaz. Bu özellikleri Firefox, Safari, Opera ve şimdi Internet Explorer 8 desteklemektedir. Fakat aşağıda da görebileceğiniz gibi Internet Explorer 6 ve Internet Explorer 7’de background özelliği kenarlıkları (border) kapsamaz.
Temel Özellikler
background-color
background-color özelliği arkaplanı düzgün bir renk ile doldurur. Rengi belirlemenin birkaç farklı yolu vardır. Aşağıda gördüğünüz 3 komut da aynı çıktıyı verir.
background-image
background-image özelliği arkaplana istediğiniz bir imajı yerleştirmenize olanak tanır. Bu özellik background-color özelliği ile birlikte kullanılabilir. Bu sayede arkaplana koyulan resmin kaplamadığı alan arkaplan rengi ile doldurulur. Kodu çok basittir. Unutmamanız gereken kısım imaj adreslerini stil dosyasına göre belirlemenizdir. Örneğin imaj, stil dosyasıyla aynı dizindeyse;
Varsayılan ayar olarak, background-repeat özelliği verilmişse imaj arkaplanı tamamen dolduracak şekilde yatay ve dikey olarak tekrarlanır. İstediğiniz bu olabilir ancak bazen bir imajın arkaplanda tekrarlanmamasını veya tek bir doğrultuda (yatay veya dikey) tekrarlanmasını isteyebilirsiniz. Mümkün olabilecek değerler ve sonuçları aşağıda;
background-position özelliği background özelliğinin uygulandığı elemanda imajın nerede konumlandırılacağını belirler. background-position‘da özelliği ile aslında elemanın, ilişkili olduğu elemanın sol-üst köşesine göre konumu belirlenir.
Aşağıdaki örnekte arkaplana bir imaj yerleştirdik ve background-position özelliği ile konumunu kontrol etmeye çalıştık. Tüm birimler pixel cinsinden seçildi. İlk değerler x-eksenindeki yani yatay olarak köşeden uzaklık, ikinci değer ise y-ekseni yani dikey olarak köşeden uzaklıktır.
background-position özelliği sayıların dışında kelimeler ve yüzdelerle de çalışır. Bu kullanışlı bir özelliktir. Özellikle de elamanın pixel olarak boyutlandırılmadıysa.
Kelimeler;x-ekseni için* left* center* righty-ekseni için* top* center* bottomDeğeri kelime ile belirlemede sıra sayı olarak belirlemedeki gibidir. Önce x-eksenine göre, sonra y-eksenine göre belirleme yapılır.
background-attachment
background-attachment özelliği kullanıcı sayfayı scroll ettiği zaman yani aşağı veya yukarı kaydırdığı zaman arkaplan resminin ne şekilde davranacağını belirlemeye yarar. Belirlenebilecek 3 değer vardır. scroll, fixed ve inherit. Inherit basit olarak elemanın ilişkide olduğu elemanın background-attachment bilgisini almasına yarar.
background-attachment özelliğini anlamak için sayfanın tamamıyla görüntüleyici kısmın nasıl etkileştiğini anlamak gerekiyor. Görüntüleyici kısım internet tarayınızın internet sayfasını gösterdiği bölümdür. Yani araç çubuklarının olmadığı bölüm. Görüntüleyici kısım attachment özelliğinden önemlidir.
Bir internet sayfasını aşağı kaydırdığınız zaman görüntüleyici kısım dediğimiz bölüm hareket etmez. Hareket eden internet sayfasıdır ve yukarı doğru hareket eder. Görüntüleyici kısım internet sayfasını aşağı doğru kaydırıyormuş gibi görünür. Eğer background-attachment:scroll; özelliği atanmışsa görüntüleyici kısıma şunu söylüyoruz: Eğer sayfa kayarsa arkaplan resmi de sayfayla birlikte kaysın. Daha basit söylemle arkaplan imajı uygulandığı elemana bağlanır ve onunla hareket eder. Bu durum background-attachment için varsayılan özelliktir.
Daha iyi anlamak için bir örnek verelim:
Eğer background-attachment özelliği fixed olarak ayarlanmışsa, tarayıcıya sayfa kaydırıldığı zaman eleman sabit kalsın, ilişkide olduğu elemanla birlikte kaymasın deriz.
Buna da bir örnek verelim.
Önemli olan, not edilmesi gereken nokta şudur. Eğer eleman kayıyorsa veya sabitse, bu durum sadece ilişkide olduğu elemanın sınırları içerisindedir. Yani içinde bulunduğu elemanın boyutu internet sayfasının boyutundan küçükse eleman o boyuta oranla kayar. Bunu başka bir örnekle gösterelim. Örnekte imajı sol-alt köşeye konumlandırdık.
background – Toplu Özellik
Bahsedilen özellikleri tek tek yazmaktansa, bunların tamamını aynı özellikte toplayabiliyoruz. background özelliğinde. Kullanım şu şekilde;
Örneğin aşağıdaki özellikler;
Ayrıca her değeri belirlemek zorunda da değilsiniz. Eğer bir değeri atlarsanız o değer, söz konusu özelliğin varsayılan değerine atanır.Örnek;
CSS2’de Arkaplanların Kullanım Alanları
Arkaplanlar çekici görünüm vermek amacı dışında aşağıdaki amaçlarda da kullanılabilir.Faux Sütunlar
CSS’de float özelliğini kullanıyorsanız, iki veya daha fazla sütunun aynı yükseklikte olmasını sağlamanız zordur. Yükseklikler farklı olunca bir elamanın arkaplanı diğerinden kısa olur. Tasarımınızın görünümü bozulabilir.
Faux sütunlar mantık olarak çok basittir.Her sütuna ayrı arkaplan rengi ayarlamak yerine, tüm elemanların ilişkili olduğu taşıyıcı elemana bir arkaplan imajı koyulur. Önemli nokta bu arkaplan imajının sutünların tasarımıyla aynı renkte olmasıdır.Yazı Değiştirme
İnternette kullanabileceğimiz font sayısı çok sınırlıdır. sIFR gibi araçları kullanarak değişik fontları kullanabiliriz fakat bu tür araçlar tarayıcıların Javascript’i desteklemesini gerektiriyor. Değişik fontlar kullanmanın daha basit ve tüm tarayıcılarda kullanılabilen yolu şudur. Kullanmak istediğiniz yazının bir imajını oluşturmak. Üstelik istediğiniz yazı tipinde. Bu yolla yazınız hala arama motorları tarafından okunabilecek.
Örneğin HTML kısmı şu şekilde olsun;<h3 class=”blogroll”>Blogroll<,/h3>
Eğer 200px’e 75px boyularında daha iyi fontlarla yazılmış bir imajınız varsa aşağıdaki kodlarla imajı arkaplana atayabilirsiniz.
Daha Kolay Liste İmajları
Sırasız listelerde imaj kullanımı görüntülemede garipliklere yol açabilir. CSS liste özelliklerini tamamıyla uğdaşmak yerine, liste noktalarını gizleyip onları bir arkaplan resmi ile değiştirebiliriz. Bu şekilde istediğiniz imajı kolayca liste imajı olarak atayabilirsiniz. Örnek;
CSS3’te Arkaplanlar
CSS3’ün arkaplan özelliğinde birçok değişik özelliği var. En ilgi çekici olanı, arkaplanda birden fazla imajı kullanabilmemize olanak sağlayan özellik olsa da, çok kullanışlı 4 özellik daha var.Birden Çok Arkaplan İmajı
CSS’3 te arkaplan için birden fazla imaj kullanabileceğiz. Kod, CSS2’deki ile aynı. Fakat farklı olarak her imaj adresinin arasına virgül koymamız gerekiyor. İlk belirtilen imaj en üstte, sonraki onun altında şeklinde görüntülenir.
Yeni Özellik: background-clip
Bu özellik bizi makalenin en başında bahsedilen arkaplan kenarlığı kapsar-kapsamaz tartışmasına geri götürüyor. Tartışma “arkaplan boyalı alan” şeklinde tanımlanır.background-clip özelliği arkaplanların nerede gösterileceğini daha çok kontrol etmenizi sağlayabilmek için eklenmiştir. Kullanılabilen değerler;
Yeni Özellik: background-origin
Bu özellik background-position özelliği ile birlikte kullanılıyor. background-position özelliğini, kenarlığa, iç boşluklara ve içeriğe göre ayarlayabilmenizi sağlıyor.
Yeni Özellik: background-size
background-size özelliği arkaplan imajınızı yeniden boyutlandırmanıza yardımcı olur.
background-size: contain; /*arkaplan imajı elemandan büyükse, imajı küçültür. (en boy oranını koruyarak) */background-size: cover; /*arkaplan imajı elemanın boyutlarına göre genişletilir. (en boy oranını koruyarak) */background-size: 100px 100px; /*belirtilen değerlere göre imajı boyutlandırır.*/background-size: 50% 100%; /* belirtilen yüzdelere göre imajı boyutlandırır. oranlar ilişkili olduğu elemana göredir.*/Yeni Özellik: background-break
CSS3’te elemanlar ayrı kutulara bölünebiliyor. background-break özelliği arkaplanın bu kutularda nasıl görüntüleneceğini kontrol eder.
Background-break: continuous; /* varsayılan durum. kutular arasında boşluk yoksa kullanılır. */Background-break: bounding-box; /*kutular arasındaki boşluk da kullanılır.*/Background-break: each-box; /*her elemanı ayrı ayrı ele alır ve her elaman için arkaplan imajını tekrar gösterir. */Değişiklik: background-color
CSS3’te background-color özelliğinde gelişme var. Arkaplan rengini belirtmeye ek olarak kullanılmayan alt katmanın rengini de belirlemeye olanak sağlanmış. Bunu / ile belirtiyoruz.
Değişiklik: background-repeat
CSS2’de bir arkaplan imajı tekrarlanırken genellikle uygulandığı elemanın sonuna gelinince yarıda kesilir. CSS3’te bunu düzeltmek için 2 yeni özellik var:background-repeat:space; /*imajın yarıda kesilmesini önlemek için aralara eşit boşluklar koyar.*/background-repeat:round; /*imaj daraltılarak yeniden boyunlandırılır.*/Değişiklik: background-attachment
CSS3’te background-attachment özelliğinin yeni bir durumu var: local. Bu değer scroll edilebilen elemanlarla oynayabilmeye yarıyor. background-attachment:scroll; olarak belirlendiği zaman eleman içeriği kaydırıldığı zaman arkaplan resmi kaymaz.
background-attachment:local; durumu ile şimdi eleman içeriği ile birlikte arkaplan resmi de kayabiliyor.
Son Söz
Toplamak gerekirse, CSS de arkaplanla ilgili bilinmesi gereken birçok özellik bulunmakta. Fakat biraz kafa yorduğunuz zaman kolay anlaşılır ve kullanışlı şeyler olduğunu göreceksiniz.Eğer CSS’de yeniyseniz hızlı şekilde arkaplan özelliklerini öğrenmenizde fayda var. Eğer CSS’ye alışıksanız, siz de en az benim kadar tüm tarayıcıların CSS3 desteklemesini bekliyorsunuzdur!
