CSS Background Özelliği
Web Tasarım meraklılarına selamlar :)
HTML-CSS makalelerimizde yine yeni bir konuyla birlikteyiz ve bugün CSS Background (arkaplan) özelliklerini öğreneceğiz.
Web tasarım dünyasında sıkça kullanılan background işlemler sayesinde web sayfalarını oldukça janjanlı hale getirmek
mümkün oluyor ve haliyle her web tasarımcının adı gibi bilmesi gerekiyor.
CSS arkaplan özelliklerini sırasıyla görelim;
1-Background-Color
HTML DOM nesnelerine arkaplan rengi vermeyi sağlar,özellikle tasarım tekniklerinde site şablonunu ilk oluştururken
kullandığım renklendirme yöntemi ile nerelerde hangi Div nesnelerini kolaylıkla görsel hale getirebiliyorum ve tavsiye de ederim.
Örnek olarak Dreamveawer uygulamamızda boş bir HTML belgesi oluşturalım ve belgemizin body tagına Div elementi
ekleyelim;
100x100 px boyutlarında kare olacak şekilde bir div nesnesi oluşturduk ve arkaplanını kırmızı yapabilmek için
"background-color" özniteliğine "#F00" renk kodunu yazdık,oluşturduğumuz bu div nesnesinin internet tarayıcısındaki
çıktısı ise:
şeklinde oluyor.
2-Background-Image
HTML nesnelerinin arkaplanlarında resim göstermek için ve en sık kullanılan CSS tekniğidir,örneğin şimdi Google görsel arama motorunu kullanarak "CSS" adında bir resim seçelim:
Şimdi yeni bir div daha oluşturalım ve bu resmi Div nesnesinin arkaplanı olarak uyarlayalım,ancak dikkat etmemiz
gereken nokta bu resim 498x200 px boyutlarında olduğu için Div nesnemizin boyutlarıda resmi tam kapsamalı ve aynı
zamanda resim linkini "url" ile referans vermelisiniz:
Sayfamızı tarayıcımızda çalıştırdığımızda resmin aynen geleceğini göreceksiniz.Bu tekniği kullanırken mümkün olduğunca internetteki resimleri bu örnekte olduğu gibi doğrudan link yazmak yerine resmi bilgisayarınıza indirdikten sonra proje yolunuzdan link vermeyi öneririm çünkü resim internetten kaldırıldığında ya da internet bağlantınızda sorun olduğunda resmi görüntüleyemeyecek ve siteniz biraz boş gibi duracaktır.
3-Background-Repeat
Background-Image ile kullanılan bu özellik bir nesneye verilen arkaplan resmini tekrar ettirmemizi sağlar.Bu özelliğin kullanılmasının en büyük avantajı sitelerde bazı resimler tekrar ettirilerek kaynak dosya tasarrufu sağlanması ve siteyi ziyaret eden kullanıcının internet bant genişliğini daha az kullanarak sitenin daha hızlı açılmasını sağlamasıdır.
Bu tekniğin uygulanabilmesi için tekrar ettirilecek resmin piksel cinsinden genişliği,arkaplan olarak uyarlanacak nesnenin genişliğinden daha az olması gerektiğidir.Yani resim nesneden küçük olmalı ki tekrar edilebilsin.
Background-Repeat CSS özelliğinin alt özelliklerini incelersek;
a-Repeat:
Resmin düzlem farketmeksizin tekrar edilmesini sağlar.
b-Repeat-X:
Resmin sadece yatay düzlemde tekrar edilmesini sağlar.
c-Repeat-Y:
Resmin sadece dikey düzlemde tekrar edilmesini sağlar.
d-No-Repeat:
Resim,nesneden küçük olsa bile hiçbir şekilde tekrar ettirmesini önler.
Örneğin HTML sayfamıza yeni bir Div nesnesi daha açalım ve arkaplan resminden daha büyük bir genişlik verelim,ardından özniteliklerden "repeat" özelliğini verelim:
Yaptığımız örnek ekranımda o kadar çok geniş bir yer kaplıyor ki burada gösteremiyorum,o yüzden kendi bilgisayarınızda deneyerek görün derim :)
4-Background-Attachment
Bazı siteleri gezerken dikkat etmişsinizdir,siz sayfayı aşağı kaydırsanız bile resim ekranda aynı yerinde durur ancak
sitenin diğer içeriği hareket eder.İşte bu olaya CSS dilinde "scroll" (kaydırma) özelliği denilir.
Background-attachment özelliği ile arkaplana resim atanmış nesneler sayfada dikey ya da yatay kaydırma sırasında
resim sabitlenir ve kullanıcı ne kadar uğraşsa da resim başka bir konuma taşınmaz.
Bu özelliği ileride tekrar göreceğiz,o yüzden şimdilik bu konuyu geçiyoruz :)
5-Background-Position
Diyelim büyük bir Div nesnemiz var ve ondan biraz küçük tekrar ettirmediğimiz arkaplan resmimiz var,resim varsayılan
olarak div nesnesinin sol üstünde durur ve biz bu teknik ile resmi hiç tekrar ettirmeden resmin konumunu değiştirebiliyoruz.
Bu CSS özelliğinin alt özniteliklerini görelim;
a-Top:
Resmin nesnenin içinde üst kısımda yer almasını sağlar.
b-Center:
Resmi nesnenin içinde ortalar.
c-Left:
Resmi nesnenin iç sol kısmına hizalar.
d-Right:
Resmi nesnenin iç sağ kısmına hizalar.
CSS arkaplan özellikleri buraya kadar,bu arkaplan özelliklerini ileriki makalelerimizde güzel web tasarımları uygularken tekrar bu konulara değineceğiz.O yüzden şimdilik tasarım mantığını kavramanız yeterlidir.
Bir sonraki makalemizde görüşünceye dek hoşçakalın esen kalın :)
HTML-CSS makalelerimizde yine yeni bir konuyla birlikteyiz ve bugün CSS Background (arkaplan) özelliklerini öğreneceğiz.
Web tasarım dünyasında sıkça kullanılan background işlemler sayesinde web sayfalarını oldukça janjanlı hale getirmek
mümkün oluyor ve haliyle her web tasarımcının adı gibi bilmesi gerekiyor.
CSS arkaplan özelliklerini sırasıyla görelim;
1-Background-Color
HTML DOM nesnelerine arkaplan rengi vermeyi sağlar,özellikle tasarım tekniklerinde site şablonunu ilk oluştururken
kullandığım renklendirme yöntemi ile nerelerde hangi Div nesnelerini kolaylıkla görsel hale getirebiliyorum ve tavsiye de ederim.
Örnek olarak Dreamveawer uygulamamızda boş bir HTML belgesi oluşturalım ve belgemizin body tagına Div elementi
ekleyelim;
100x100 px boyutlarında kare olacak şekilde bir div nesnesi oluşturduk ve arkaplanını kırmızı yapabilmek için
"background-color" özniteliğine "#F00" renk kodunu yazdık,oluşturduğumuz bu div nesnesinin internet tarayıcısındaki
çıktısı ise:
şeklinde oluyor.
2-Background-Image
HTML nesnelerinin arkaplanlarında resim göstermek için ve en sık kullanılan CSS tekniğidir,örneğin şimdi Google görsel arama motorunu kullanarak "CSS" adında bir resim seçelim:
Şimdi yeni bir div daha oluşturalım ve bu resmi Div nesnesinin arkaplanı olarak uyarlayalım,ancak dikkat etmemiz
gereken nokta bu resim 498x200 px boyutlarında olduğu için Div nesnemizin boyutlarıda resmi tam kapsamalı ve aynı
zamanda resim linkini "url" ile referans vermelisiniz:
Sayfamızı tarayıcımızda çalıştırdığımızda resmin aynen geleceğini göreceksiniz.Bu tekniği kullanırken mümkün olduğunca internetteki resimleri bu örnekte olduğu gibi doğrudan link yazmak yerine resmi bilgisayarınıza indirdikten sonra proje yolunuzdan link vermeyi öneririm çünkü resim internetten kaldırıldığında ya da internet bağlantınızda sorun olduğunda resmi görüntüleyemeyecek ve siteniz biraz boş gibi duracaktır.
3-Background-Repeat
Background-Image ile kullanılan bu özellik bir nesneye verilen arkaplan resmini tekrar ettirmemizi sağlar.Bu özelliğin kullanılmasının en büyük avantajı sitelerde bazı resimler tekrar ettirilerek kaynak dosya tasarrufu sağlanması ve siteyi ziyaret eden kullanıcının internet bant genişliğini daha az kullanarak sitenin daha hızlı açılmasını sağlamasıdır.
Bu tekniğin uygulanabilmesi için tekrar ettirilecek resmin piksel cinsinden genişliği,arkaplan olarak uyarlanacak nesnenin genişliğinden daha az olması gerektiğidir.Yani resim nesneden küçük olmalı ki tekrar edilebilsin.
Background-Repeat CSS özelliğinin alt özelliklerini incelersek;
a-Repeat:
Resmin düzlem farketmeksizin tekrar edilmesini sağlar.
b-Repeat-X:
Resmin sadece yatay düzlemde tekrar edilmesini sağlar.
c-Repeat-Y:
Resmin sadece dikey düzlemde tekrar edilmesini sağlar.
d-No-Repeat:
Resim,nesneden küçük olsa bile hiçbir şekilde tekrar ettirmesini önler.
Örneğin HTML sayfamıza yeni bir Div nesnesi daha açalım ve arkaplan resminden daha büyük bir genişlik verelim,ardından özniteliklerden "repeat" özelliğini verelim:
Yaptığımız örnek ekranımda o kadar çok geniş bir yer kaplıyor ki burada gösteremiyorum,o yüzden kendi bilgisayarınızda deneyerek görün derim :)
4-Background-Attachment
Bazı siteleri gezerken dikkat etmişsinizdir,siz sayfayı aşağı kaydırsanız bile resim ekranda aynı yerinde durur ancak
sitenin diğer içeriği hareket eder.İşte bu olaya CSS dilinde "scroll" (kaydırma) özelliği denilir.
Background-attachment özelliği ile arkaplana resim atanmış nesneler sayfada dikey ya da yatay kaydırma sırasında
resim sabitlenir ve kullanıcı ne kadar uğraşsa da resim başka bir konuma taşınmaz.
Bu özelliği ileride tekrar göreceğiz,o yüzden şimdilik bu konuyu geçiyoruz :)
5-Background-Position
Diyelim büyük bir Div nesnemiz var ve ondan biraz küçük tekrar ettirmediğimiz arkaplan resmimiz var,resim varsayılan
olarak div nesnesinin sol üstünde durur ve biz bu teknik ile resmi hiç tekrar ettirmeden resmin konumunu değiştirebiliyoruz.
Bu CSS özelliğinin alt özniteliklerini görelim;
a-Top:
Resmin nesnenin içinde üst kısımda yer almasını sağlar.
b-Center:
Resmi nesnenin içinde ortalar.
c-Left:
Resmi nesnenin iç sol kısmına hizalar.
d-Right:
Resmi nesnenin iç sağ kısmına hizalar.
CSS arkaplan özellikleri buraya kadar,bu arkaplan özelliklerini ileriki makalelerimizde güzel web tasarımları uygularken tekrar bu konulara değineceğiz.O yüzden şimdilik tasarım mantığını kavramanız yeterlidir.
Bir sonraki makalemizde görüşünceye dek hoşçakalın esen kalın :)