Yeniden merhabalar. Aslına bakarsanız bu makalede Photoshop ile başka bir uygulama anlatmayı düşünüyordum. Ancak her zaman hızlıca yaptığım bir uygulamayı sizinle İpucu olarak paylaşmaya karar verdim.

Bu kısa yazımızda sadece 2 küçük adımda Photoshop’ta nasıl etkili bir arkaplan yapacağımızı anlatacağız. Dilerseniz hemen uygulamamıza geçelim.

Merhabalar, sizler de biliyorsunuz ki Css sayesinde birçok stil tanımlaması yapabiliyoruz ve web sayfalarımızı bu stillere göre şekillendirebiliyoruz. Css’nin basit, etkili ve güçlü biçimde kullanılabildiği bir başka alan ise; web sayfalarımızın arkaplan (background) resimleri.

Bu yazımızda örnek kodlar ve sayfalarla birlikte bir arkaplan resmini Css ile nasıl sabitleyebileceğimizi ve nasıl tekrarlı kullanımını (repeat) sağlayabileceğimizi anlatacağız. Her zaman olduğu gibi yine işin mutfağına iniyoruz…

Css ile Sabit Arkaplan Resmi
Çoğu websitesinde gördüğümüz güzel bir uygulama ise kullandığımız arkaplan resminin sabit bir şekilde web sayfamızda kalmasıdır. Sayfamız için uygun olduğunu düşündüğümüz bu resmi küçük bir Css kodu ile sayfamızda sabit hale getirebiliriz.

(Öncelikle belirtmeliyim ki aşağıda okuyacağınız bilgi eski bir yazıdan alıntı. Yeni bir proje için rastgele arkaplan gösterecek ve bunu siteyi fazla yormadan sadece Css ve Php yardımıyla yapacak bir bileşen arıyordum. Eski dostumuz A List Apart imdadıma yetişti ve orada bulunan uygulamayı yaparak sonuca ulaştım. Umarım bu eski bilgi sizler için yararlı olur.)

Öncelikle Neler Gerekli?
Her girişte veya her sayfa açılışında farklı bir arkaplan resmi göstermek için Php (4.2 ve üzeri) Css ve Xhtml çalıştıran bir sunucunuz olması yeterli. Bundan sonrası çok küçük bir iki işleme kalıyor. Dilerseniz uygulamanızı yerel sunucu üzerinde (localhost) dilerseniz de kendi hostunuzda yapabilirsiniz. Bununla birlikte farklı gösterimler için “aynı boy ve genişlikle” formatı (gif, jpeg, png) önemli olmayan resimleriniz olmalı. Bu resimlerinizi hazırladıktan sonra hemen uygulamamıza geçebiliriz.

Rastgele Arkaplan Resmi Atama
Kısaca aşağıda yapacağımız küçük işlemi anlatmak istiyorum sizlere. Bu işlemde bir .php dosyasında yazılmış olan fonksiyon ile resimlerimizi bir dizin içindeyken (veya başka bir dizindeyken) kendi .css (style) dosyamız içine tanımlamış olduğumuz alan ile gösterime alıyoruz. Şimdi size gerekli olan şey Alistapart.com üzerindeki orjinal .php dosyası. Burada gördüğünüz kodları bir metin editör içine alıp “dongu.php” olarak kaydedin. Kayıt işlemini yaptıktan sonra resimlerinizin bulunduğu dizin içine atın.

Bu aşamadan sonra resimlerimizi göstereceğimiz alanın CSS tanımlamasını yapmamız gerekiyor. Bu tanımlama için şöyle bir kod yeterli olacaktır.

#dongualani
{
background:#fff url(dongu.php) no-repeat center top;
width: 800px;
height: 170px;
}

Gördüğünüz gibi stil dosyamızda “dongualani” diye bir id oluşturduk ve bu id üzerinde beyaz arkaplan rengi ve arkaplan resmi olarakta daha önce oluşturduğumuz “dongu.php” dosyasına ithafta bulunduk. Burada dikkat ettiyseniz arkaplan tanımlamasında bir resim dosyası kullanacağımıza bir .php dosyası kullandık ve .php dosyasının işlem yapmasını sağladık. Bu alanda bulunan resim genişlik ve yüksekliğinde siz değişiklikler yapabilirsiniz. Bu kodu kopyalayıp stil dosyanıza kaydediniz.

Stil dosyasını da kaydettikten sonra artık yapacağımız tek şey stil olarak tanımladığımız id sınıfına Xhtml üzerinde atıfta bulunmak. Bunu da aşağıdaki kod yardımıyla gerçekleştirebiliriz.

<div id=”dongualani”> </div>

Yukarıda yer alan kodu da rastgele arkaplan resmimizin görünmesini istediğimiz yere kopyalıyoruz. Bundan sonra dosyamızı kaydederek sonucu görebiliriz. Ben şurada bir örnek çalışma yaptım ve hem Firefox hem de Internet Explorer üzerinde test ettim. Sonuç gayet güzel…

Sorular ve Problemler
Şayet yukarıdaki işlemleri yaptınız ve sonuca ulaşamadıysanız adımları yeniden takip edin. Yukarıda bahsettiğimiz gibi dongu.php ve resim dosyalarınızın aynı dizinde olduğundan emin olun. Şayet resimleriniz ve dongu.php dosyanız farklı bir alandaysa dongu.php içinde $folder = ‘.’; alanına dizin yolunuzu yazın. Bununla birlikte #dongualani kodu içindeki dongu.php dosyasının tam yolunu yazmanız da uygulamanın çalışası için yeterli olacaktır. Ancak aynı dizin içinde dosyalarınız barınıyorsa bunu yapmanıza gerek yoktur.

Kaynaklar: A List Apart | Sonspring.com