"Çalışmadan, öğrenmeden, yorulmadan rahat yaşamanın yollarını aramayı alışkanlık haline getirmiş milletler, evvela haysiyetlerini, sonra hürriyetlerini ve daha sonra da istikballerini kaybetmeye mahkumdurlar."

Mustafa Kemal ATATÜRK

yakuter


15 Eylül 2006

CSS ile Arkaplan Resmi

Etiketler: , , ,
Kategori Css, Web |

Bazen sitelerimizin öğelerinin arkaplanına desen vermek isteriz. "Table"'lara bunu yapmak kolaydı. WYSIWYG düzenleyicileri kolaylıkla bunu yapmamızı sağlıyorlardı. Peki ya sitemizin tamamına desen vermek istersek ne yapacağız? Css ile çok basit bir kod kullanarak bunun üstesinden gelebiliriz.

Duz Metin
body {
background-image: url(resimler/arkaplan.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-color: white;
background-position: top-left;
}

Bu kullandığımız kod sitemizi < body > seçicisine yukarıda belirttiğimiz özellikleri kazandırır. Gelin biraz da özelliklerden bahsedelim.

background-image:
Örnekte gördüğünüz gibi arkaplan resmi olarak "resimler" klasöründeki "arkaplan.jpg" resmini seçtiğimizi bu özellikle belirtiyoruz.

background-repeat:
Bu özellik ile arkaplan resmimizin tekrar edip etmeyeceğini, eğer edecekse x'mi yoksa y ekseninde mi edeceğini belirtiriz. Alabileceği değerler:

  • repeat - Hem yan olarak hem de alta doğru tekrar et
  • repeat-x - yana doğru tekrar et
  • repeat-y - aşağı doğru tekrar et
  • no-repeat - tekrar etme

background-attachment:
Arkaplan sayfa ile birlikte kaysın mı yoksa sabit mi kalsın ayarını bu seçenek ile yaparız. Bunun değerleri:

  • scroll - sayfa ile kayar
  • fixed - sabittir

background-color:
Arkaplan resminin altında kalan alanın rengini, yani arkaplanın rengini belirlediğimiz özelliktir.

background-position:
Arkaplan deseninin başlayacağı yeri belirtir. Alabileceği değerler:

  • top left - üst sol
  • top center - üst orta
  • top right - üst sağ
  • center left - orta sol
  • center center - ekranın ortası (hem üstten hem yandan)
  • center right - orta sağ
  • bottom left - alt sol
  • bottom center - alt orta
  • bottom right - alt sağ
  • x-% y-% - yüzde olarak sağ/sol ve üst/alt
  • x-pos y-pos - x,y koordinatlarına göre

Benzer Yazılar

“CSS ile Arkaplan Resmi” için 16 Yorum

Sayfalar: [2] 1 » Hepsini Göster

  • 16 mailce
    21 Mart 2008, 12:18

    kesinlikle katılıyorum eminim herkesin aradıgı bir şeydir yardımlarınız için teşekkür ederim işime yaradı :)

  • 15 yakuter
    20 Mart 2008, 18:54

    blank.gif boş bir resimdir ve istediğiniz kadar büyütebilirsiniz kod ile. Resmin arkaplanında ne varsa yine o görünecektir. Css ile arkaplan resmi yerleştirmişseniz o resmi görürsünüz bununla birlikte sanki kullanıcı o resme tıklıyormuş gibi blank.gif’e tıklayabilir. Kısacası zeminin üstüne tıklayabileceğiniz boş bir resim koyuyoruz diyelim :)

    İnternet haberde dediğim gibi boş bir resim koymuşlar. resmin adresi de şu: http://ad2.zapmedya.com/ads/1×1.gif

    Umarım şimdi daha iyi anlatabilmişimdir. Aslında bu konudan güzel makale çıkar, bir ara yazmayı düşünmeliyim :)

  • 14 mailce
    19 Mart 2008, 14:01

    habertürk te internethaber de felan görüyorum bende siteme bu şekilde reklam aldım arkaplanı komple resimle kaplayıp sonra link vermem lazım çogu sitede gördüm sanırım yapılabiliyo fakat ben anlatamadım galiba :S

    peki blank.gif nasıl oluyor degerli vaktinizi almazsam bana bu konuda yardımcı olabilirmisiniz

  • 13 yakuter
    19 Mart 2008, 09:00

    Arkaplanalink veremezsin. Ancak blank.gif gibi boş bir resim kullanır ve o resme link verebilirsin.

  • 12 mailce
    18 Mart 2008, 20:35

    merhaba bu konuya yazmam dogru olurmu bilmiyorum ama ben arkaplana link nasıl eklenir arkaplan’a tıklandıgında başka siteye link verecegim bu konuda bana yardımcı olursanız sevinirim şimdiden teşekkürler…

  • 11 Kutsal
    17 Mart 2008, 11:46

    Teşekkürler. çok faydalı oldu

Sayfalar: [2] 1 » Hepsini Göster


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Tasarım Fallendesign.
Site içerisindeki içerikler izinsiz veya kaynak gösterilmeksizin kopyalanamaz, alıntı yapılamaz.

Wordpress Valid XHTML 1.0 Valid CSS