Serkan Ayyıldız

Meraklı bir yazılım uzmanı...

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;

CSS-Div

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:

CSS-Background-Color

ş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:

CSS-Örnek

Ş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:

CSS-Background-Image

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:

CSS-Background-Repeat

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 :)

Bir yorum bırak E-posta adresiniz yayınlanmayacaktır.

Menu