İçeriğe Atla
POPÜLER ARAMALAR: reklam, pazarlama, ,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog
Feedburner RSS
15 Eylül 2006

CSS ile Arkaplan Resmi

Etiketler: , , ,
Kategori Css | 28 Yorum

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.

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

SEO




Yorumlar

“CSS ile Arkaplan Resmi” için 28 Yorum

Sayfalar: « 1 2 3 Hepsini Göster

  • 21 EfsaneFenerli

    19, mesaja cevap verebilirmisiniz ??

  • 22 özkan

    tesekkürler kardes, sayende hersayfa için arkaplan diye uğrasmadım. ;)

  • 23 foxfire

    wp mu için nasıl uygulanır bu her kullanıcı kendi arkaplanını değiştirebilsin istiyorum bloghoster deki gibi

  • 24 Erhan

    teşekkürler, çok işime yaradı.

  • 25 sek!

    Wordpress temanın style.css dosyasında arkaplan resmi background-attachment: fixed olarak ayarlanmış ve sitenin üst kısmındaki banner, arkaplan ile bitişik halde tasarlanmış. Benim yapmak istediğim şey: resmin üst, yani banner kısmına RSS, e-mail vs. gibi küçük butonlar ekleyip, bu butonlara link vermek.

    Daha önce bu resmi Photoshop’un resme link vermeye yarıyan Slice Tool’u ile üzerindeki simgelere(RSS, e-mail) link verdim ve “Save for web” ile kaydettim. Kaydettiğim yerde bir “image” klasörü ile bir .html dosyası oluştu.

    Bu oluşturmuş olduğum, üzerine resimli buton şeklinde linkler eklenmiş .html dosyasını CSS’den nasıl arkaplan olarak atayabilirim?

  • 26 yakuter

    @sek, kısaca anlatmam gerekirse bu html dosyasındaki resimle ilgili kodları alıp temanın header.php dosyasında uygun yere yapıştır. Daha sonra bu images klasöründeki resimleri temandaki images klasörüne kopyala. Bununla birlikte önceki arkaplan resmini kaldırman lazım, hem css’ten hem de header.php’den.

    Umarım anlatabilmişimdir. Cevaba çok uzak bir yerden soru sorduğun için ancak bu kadar anlatabiliyorum. Web Deneyimleri‘nde çok güzel videolu anlatımlar var tema yapımıyla ilgili. İşine yarayacağını düşünüyorum. Bir bak istersen.

  • 27 sek!

    Teşekkür ederim yakuter. Yazdığın yöntem işe yarayacağa benziyor.

  • 28 modifiye

    Ben denedim olmadı buna benzer bir koddaha vardı ikisindede sonuç alamadım. Yinede emeğiniz için teşekkürler..

Sayfalar: « 1 2 3 Hepsini Göster


Yorum Yapın

Sponsorlar

Günün Notu

"Ç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

Rastgele Sözler Eklentisi ile oluşturulmuştur.
Facebook Friend Feed Twitter Wordpress Netvibes Linked In RSS Beslemesi

yakuter.com © 2006-2009 Erhan Yakut. Site tasarım fallendesign. Hosting sponsoru WebGrup.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

WordPress Valid XHTML 1.0 Transitional Valid CSS! php

tracker