Bu defa bir tasarım yerine bilgi paylaşıyorum.
Her web tasarımcının etkin olarak kullanabilmesi gerektiğini düşündüğüm, güçlü bir öğe olan background yani arka resimlerinden bahsedeceğim.

Web tasarımı tekniklerinin bence en can alıcı noktasını oluşturan arka planlar, web tasarımlarınızda hemen hemen her noktada kullanılabilen görsellerdir. formlarınızdaki yazı giriş alanlarından, link verdiğiniz yazılara kadar her noktada kullanabilirsiniz. Tabi düzgün kullanamadığınızda can sıkıcı olurlar. Düzgün kullanabilmek içinse sayfada kullandığınız öğelerin yapılarını bilmeli ve background verirken bunları göz önünde bulundurmalısınız.

En basidinden bir tabloya background verdiğinizde, tablonun yüksekliğinin değişebileceğini unutmamalısınız.

background özelliğinizi taglara yazabileceğiniz gibi, taglarınıza class vererek css dosyanızdan da yapabilirsiniz. Tabii ki kodların ayrı bir css sayfasından yönetilmesi, değişiklik için sayfa kodlarının kurcalanmaması ve kolaylık açısından çok faydalıdır.

css ile background vermek için öncelikle background vereceğimiz nesneyi çağırırız ve background özelliğini nesneye atarız.

örnek: body { background:#000}

yukarıdaki örneği background-color ile de yapabilirsiniz fakat genel bir komut ile daha fazla parametreyi (renk, resim, hizalanma, tekrar) değiştirme imkanı varken her biri için ayrı ayrı yazarak kalabalık yapmanın bir manası yoktur. zaten css'nin bir amacı da kod kalabalığından kurtulmak olduğuna göre, bir background özelliğinin bir çok parametresini çağırabileceğiniz "background" kodu ile yapabildiklerimizi yapmamız daha faydalı olacaktır.

yukarıda da göreceğiniz gibi web tasarımlarımızdaki öğelerin arka rengini değiştirmek için background özelliğinin ardında "#" işareti koyarak renk kodumuzu yazmamız yeterli olacaktır. (kolaylık için yanyana aynı karakter olan renk kodları da kısaltılabilir -333 f00 fff)

Arkaya resim çağırmak için ise url(resmin.jpg) yazmamız gerekir.

Şöyle: body {background:url(resim.jpg)}

Arka plana çağırılan resimler tekrar ederek döşenirler. bu tekrar işlemine de müdahale edebilirsiniz. bunun üç yolu vardır. Yatay tekrarlatmak, dikey tekrarlatmak ve tekrarlatmadan bir kere görüntülenmesini sağlamak.

Yatay tekrar için: body {background:url(resim.jpg) repeat-x}
Dikey tekrar için: body {background:url(resim.jpg) repeat-y}
Tekrar etmemesi için: body {background:url(resim.jpg) no-repeat}

Örnek: body {background:url(resim.jpg) repeat-x bottom}
Örnek: body {background:url(resim.jpg) repeat-x left}
Örnek: body {background:url(resim.jpg) repeat-x center}
Örnek: body {background:url(resim.jpg) repeat-x right}
Örnek: body {background:url(resim.jpg) repeat-x top}

Yukarıda açık renk ve aşağıya doğru hafifçe koyulaşan arka planlar vardır. bunların yapımında yukarıdaki bilgiler yeterlidir. açıktan koyuya geçiş yapan bir resim hazırlarsınız. bunu "repeat-x" ile yatay olarak tekrarlatırsınız ve "top" ile yukarı dayarsınız. resmin en altındaki rengi ise sayfaya background rengi olarak verirsiniz. Böylece sayfaya aynı anda hem resim, hem renk arka plan vereceğinizi de anlamışsınızdır. resmin tekrar ederek sayfayı kaplamadığı, kısıtlı tekrar hallerinde, resmin dışında kalan alanlar arka plan renginiz ile doldurulur. Beyazdan siyaha geçiş olan bir resim düşünürsek...

Örnek: body {background:url(resim.jpg) repeat-x top #000}

bunların haricinde fixed kodu ile de arka plandaki resimlerinizi sabitleyebilirsiniz. yani web tasarımlarınızdaki yazılar scroll ile aşağı yukarı kayarken backgroundunuz sabit kalacaktır.

Örnek: body {background:url(resim.jpg) repeat-x top #000 fixed}

Gördüğünüz gibi arka plana ait birçok özellik sadece "background" komutu ile yönetilebiliyor. Şimdi sırada background ile yönetilemeyen bir arka plan özelliği olan yerini belirleme var, Web tasarım kodlarının çok bilinmeyenlerinden olan background-position... background-position arka plan resimlerinizi sağa sola, yukarı aşağı kaydırmanızı sağlar. Sayfaya döşenenlerde, hemen resmin solundan değil de, resminizin biraz daha ortalarından başlayarak tekrarlamasını sağlamak, veya düğmelerde üzerine gelindiğinde arka planın hareket etmesini sağlamak gibi birçok amaçla kullanılabilir. Sözü uzatmadan bir örnek vereyim.

Örnek: body {background:url(resim.jpg) repeat-x top #000 fixed; background-position:100px 0px}

Yukarıdaki kodda da görebileceğiniz gibi "background-position" iki değer alır. Bunlardan birincisi yatay olarak soldan ne kadar kaydırılacağı, ikincisi ise dikey olarak yukarıdan ne kadar kaydırılacağıdır. Yukarıdaki örnekte sadece soldan 100px kaydırıyoruz.

Background özellikleri olarak benim anlatacaklarım bunlar ama backgroundları hakkıyla kullanmak için bunların yanında web tasarımınızda kullandığınız kodların özelliklerini de bilmeniz gerekir. Mesela bir linki düğme gibi yapmak için bunlardan fazlasına ihtiyacınız var. "a" tagının link verdiği yazıya background verirsiniz ama yazının dışına taşmayacağı için çirkin görünür. kenarlara biraz boşluk vermek için padding:5px gibi bir kod ile bu boşluğu yaratmanız gerekir. ama "a" tagı yukarı ve aşağıya doğru padding ile itemez. padding ile itebilmesi için bir blok olması gerekir. blok yapmak için de display:block ile "a" tagınızı blog haline getirmelisiniz. Yeni başlayanların Kafası karışmasın. Bunları da anlatırım ama ilerde. Şimdilik konumuz sadece background. Son bir örnek ve hepinize selamlar...