Css ile Arkaplan Resmi Tanımlamaları

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.

Makalemizin giriş kısmında belirttiğimiz gibi arkaplan resmimizi istediğimiz durumlarda sabit hale getirebiliriz. Bunu yapacak olan Css kodunu aşağıya yazıyorum;

1 body {
2 margin: 0px;
3 padding: 0px;
4 background: #fff url(bg.gif) no-repeat left bottom fixed;
5 }

örnek kodda gördüğünüz üzere Body etiketine bir stil tanımlaması yaptık. Bu tanımlamada Background parametresine öncelikle arkaplan renk değerimizi #fff (beyaz) olarak verdik. Daha sonra url ile başlayarak kullanmak istediğimiz resmin adını ve uzantısını yazdık. (Stil dosyamız ile kullanacağımız resmin aynı dizinde olacağını varsayarak images veya img/resim.gif gibi bir ayrıma gitmedik) daha sonrasında gelen no-repeat tanımı ile resmimizin bir daha tekrarlanmamasını istedik. Sol ve en alt kısımda tekrarlanmayacak olan bu resmi fixed parametresi ile sabit hale getirdik. Böylelikle sayfamız ne kadar uzun olursa olsun kullanmış olduğumuz arkaplan resmi sitemizin en alt ve solunda sabit bir şekilde duracak.

Bu kodun çalışan halini görmek için buradaki örnek sayfaya bakabilirsiniz.

Css ile Tekrarlanan Arkaplan Resmi
Css ile yapabileceğimiz arkaplan atamalarından bir diğeri de tekrarlı resimler oluşturarak web sayfalarımıza renk katmaktır. Daha önceki dönemlerde yazmış olduğumuz Web 2.0 Tasarım özellikleri ve uygulamaları isimli yazımızda Gradient efektli resimlerin Web 2.0 tarzı sitelerde çok kullanıldığından bahsetmiştik.

Bu aşamada küçük bir gradiente sahip resmimizi bu defa sitemizin en üstünde tekrarlanacak biçimde göstereceğiz. Ancak bu tekrarı bir kez yapacağız. Sayfa boyu uzun olduğu takdirde 2 kez tekrarlanan bu resim sayfamızda kötü görünebilir.

Örnek resimÖrnek olarak kullanacağımız ve benim Photoshop’ta yaptığım resmi yan tarafta görebilirsiniz. Şimdi bu resmimizi web sayfamızın en üstünde ve sadece üst bölümde (top) tekrarlayacak biçimde gösterecek olan Css kodunu yazalım.

1 body {
2 background:#fff url(gri.gif) repeat-x;
3 color:#333;
4 font:12px arial, verdana, helvetica, sans-serif;
5 }

Gördüğünüz gibi ilk örneğimizdekiyle benzer bir yaklaşım izleyerek Body etiketi içinde Background tanımlaması kullanıyoruz. Fakat burada dikkat etmeniz gereken bir nokta var. O da resmin sadece X ekseninde tekrarlanabileceği. X ve Y koordinatlarını düşündüğünüzde bu resim sitenin en üstünde tek sefer tekrarlanacak ve gösterime böyle girecek.

Örnek uygulama için lütfen buraya tıklayınız…

Kaynak : http://www.t-infection.com

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir