yakuter » 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, Web | Toplam 2,363 kez okunmuş | 18 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.

Düz 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

“CSS ile Arkaplan Resmi” için 18 Yorum

Sayfalar: [2] 1 » Hepsini Göster

18 azmiii
16 Haziran 2008, 10:14

yorumlardan bile bilgi alabiliyoruz teşekkürler ;)
17 gevv
07 Haziran 2008, 13:34

Teşekkürler Abi
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