Css ile Arkaplan Resmi Tanımlamaları
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.
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;
body {
margin: 0px;
padding: 0px;
background: #fff url(bg.gif) no-repeat left bottom fixed;
}
ö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 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.
body {
background:#fff url(gri.gif) repeat-x;
color:#333;
font:12px arial, verdana, helvetica, sans-serif;
}
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…
Daha Fazla Kaynak
Bu basit uygulamaların yanında çok daha karmaşık ve ileri düzey arkaplan resim atamaları için lütfen aşağıdaki sitelere gözatınız.
W3schools.com
Tizag.com
Tutorialhero.com
Netlobo.com
Rastgele Yazılar
Css ile Arkaplan Resmi Tanımlamaları yazısı için 12 yorum yapılmış...
Yorumunuzu Yazın
İki sorum olacak izninizle: Peki bu sabit atadığımız imaja link atayabiliyor muyuz? Nasıl yapabiliyoruz?
2. sorum ise: Bu sabit imajı top yaptığımızda en üst kısımda gözüküyor. Bunu üste yakın bir kısımda yapmak için yani marginlemek için nasıl bir kodlama gerekiyor… Herhalde bu iki sorunun cevabını burada paylaşırsanız bir çok kişinin öğrenmesine vesile olabilirsiniz… Çok teşekkür ederim…
Merhaba Hakan, ilk sorunuza yanıt vermek istiyorum izninizle. Background yani arkaplan olarak atadığımız resme link veremeyiz. Bunu yapabilmek için ayrı bir alan açıp (div olabilir mesela) orada bir bağlantı vermeyi düşünebilirsiniz. Ancak söylediğim gibi atadığınız arkaplan resmine link vermeniz bildiğim kadarıyla mümkün değil.
İkinci sorunuza gelince, arkaplan resmini % değerleri vererek belli bir margin’e kavuşturabilirsiniz. Bu bağlantıda verilen dokümanı incelerseniz % olarak bir arkaplan resmine margin verildiğini görebilirsiniz.
Kolay Gelsin…
Çok teşekkürler. Doğrusu kısa zamanda buradan cevap almama çok sevindim. Eğer link verilebiliyorsa tekrar buradan paylaşalım derim.
Saygılarımla…
Makale sade ve etkileyici olmuş. Örnek sayfası ise gereken etkiyi ve sonucu görmek hususun da yararlı olmuş :) Teşekkürler…
Bu arada tartışmanıza ufaktan katılmak isterim ;
Benim de bildiğim kadarı ile Background (arkaplan) resimlere link verilememekte. Böyle olsa ekşisozluk aldığı Background reklamlarını linkleye bilirdi :)
Merhaba, Volkan, açık ve güzel bir yazı olmuş. Ellerine sağlık.
Bu arada Hakan’ın sorduğu soruya bir cevapta ben vereyim.
Arkadaşlarında dediği gibi arkaplana link verme olayı yok. Yalnız bunu aşağıdaki şekilde halledebilirsin;
————————-
#arkalink a {
background: url(arkaplanresmi.gif) no-repeat left top;
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
overflow: hidden;
position: fixed; }
gibi bir CSS Kodu kullandıktan sonra aşağıdaki HTML kodunu da sayfana ekle.
Bu arada HTMLler doğru şekilde görünmediğinden “
Teşekkürler
Tşkler Tamda Aradıgım Seydi css yeni Baslıyorum bu arada. Cok güzel bilgiler mevcut burda.
Peki webthese,
Nasıl div atayacağız?
CSS’de nasıl kodunu nasıl tanımlama yazacağız?
Bunlara bir açıklama yapabilir misin mümkünse?
Ben şöyle yaptım ama olmadı:
Div:
CSS:
#arkalink {
background: url(images/foto.gif) no-repeat left top;
top: 0px;
left: 0px;
position: fixed;
}
Kodlar gözükmüyor nedense…
Div kodu gözükmedi:(
merhaba arkaplana sağa veya sola doğru tekrarlanan bir resim koymak istiyorum. bunun kodunu nasıl yerleştireceğimi anlatabilir misiniz?
çok teşekkürler
Rhn şöyle yapabilirsin
background-repeat:repeat-x;
kolay gelsin, anlatım için teşekkürler…