CSS ile Arkaplan Resmi

POPÜLER ARAMALAR: reklam, pazarlama, iş,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog

15 Eylül 2006

CSS ile Arkaplan Resmi

Etiketler: arkaplan, background, Css, Web
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

“CSS ile Arkaplan Resmi” için 28 Yorum

Sayfalar: « 1 2 3 Hepsini Göster

21 EfsaneFenerli
12 Ekim 2008, 10:28

19, mesaja cevap verebilirmisiniz ??
22 özkan
23 Kasım 2008, 11:40

tesekkürler kardes, sayende hersayfa için arkaplan diye uğrasmadım. ;)
23 foxfire
21 Aralık 2008, 20:28

wp mu için nasıl uygulanır bu her kullanıcı kendi arkaplanını değiştirebilsin istiyorum bloghoster deki gibi
24 Erhan
27 Aralık 2008, 13:36

teşekkürler, çok işime yaradı.
25 sek!
07 Şubat 2009, 21:15

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
07 Şubat 2009, 21:58

@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!
07 Şubat 2009, 22:10

Teşekkür ederim yakuter. Yazdığın yöntem işe yarayacağa benziyor.
28 modifiye
28 Şubat 2009, 23:41

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

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

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