CSS ile Arkaplan Resmi

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

Benzer Yazılar

yakuter

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Bu Yazıya Ait Yorumlar

ikra.web.tr

ikra.web.tr
05 Aralık 2007

çok teşekkür ederim
faydalandım

Bilal

Bilal
09 Aralık 2007

cok teseşkkur ederım cok guzel acıklamışsınız

Muhammed Ak

Muhammed Ak
15 Aralık 2007

çok güzel anlatmışsın tebrikler ;)

mojorisi

mojorisi
29 Ocak 2008

selam yakuter
bi sorum var
peki bir background resmi bitince dibinden başka resmi nasıl tekrarlatabiliriz
örneğin
A background resmi sayfa aşağı genişleyince bitti ama onun arkadasından tekrarlanarak devam etmesi gereken B background resmi
yardım edersen sevinirim

yakuter

yakuter
29 Ocak 2008

Malesef böyle bir şey yapıldığını daha önce ne duydum ne de gördüm

Ersin EEN

Ersin EEN
02 Şubat 2008

Teşekkürler… Elinize sağlık. çok faydalı bir kaynak oldu

Ersin ENE

Ersin ENE
02 Şubat 2008

Teşekkürler… Elinize sağlık. çok faydalı bir kaynak oldu

Yorumunuz onay bekliyor.

Avşa

Avşa
02 Mart 2008

çok güzel bir çalışma olmuş wp deyeniyim verdiğiniz bilgi için tessekkur ederim

Emre

Emre
04 Mart 2008

Teşekkürler çok faydalı bir bilgi sağolun…

ümran

ümran
06 Mart 2008

çok teşekkürler çokk işimi gördü.

Kutsal

Kutsal
17 Mart 2008

Teşekkürler. çok faydalı oldu

mailce

mailce
18 Mart 2008

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…

yakuter

yakuter
19 Mart 2008

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

mailce

mailce
19 Mart 2008

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

yakuter

yakuter
20 Mart 2008

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 :)

mailce

mailce
21 Mart 2008

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

gevv

gevv
07 Haziran 2008

Teşekkürler Abi

azmiii

azmiii
16 Haziran 2008

yorumlardan bile bilgi alabiliyoruz teşekkürler ;)

EfsaneFenerli

EfsaneFenerli
05 Ekim 2008

Selam
Bende bişey sormak istiyorum

Bu kodu ben dış arkaplan değilde sitenin iç kısmına koymak istiyorum.
Bildiğim kadarıyla bu mümkün ama nasıl yapılıyor ?

Şimdiden teşekkürler
Başarılar…

Wordpress çözülen hatalar sorular | İnternet Çöplüğü

Wordpress çözülen hatalar sorular | İnternet Çöplüğü
09 Ekim 2008

[...] Arkaplan resmi değişimi [...]

EfsaneFenerli

EfsaneFenerli
12 Ekim 2008

19, mesaja cevap verebilirmisiniz ??

özkan

özkan
23 Kasım 2008

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

foxfire

foxfire
21 Aralık 2008

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

Erhan

Erhan
27 Aralık 2008

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

sek!

sek!
07 Şubat 2009

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?

yakuter

yakuter
07 Şubat 2009

@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.

sek!

sek!
07 Şubat 2009

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

modifiye

modifiye
28 Şubat 2009

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

ilyas

ilyas
03 Eylül 2009

teşekür ederim sizde olmasanız
çok işime yaradı.

pinar yildirim

pinar yildirim
14 Ekim 2009

peki css ile tüm arkaplana bir link vermemiz mümkün mü?

kendi sitesi üzerinden wordpress kullanıyorum ve sadece css kodları açık. css üzerinden bir bölgeye arkaplan görseli yerleştirdim ama html kodlarını değiştiremediğim için oraya link veremiyorum.

lütfen yardım edin, çok zor durumdayım.

memet

memet
05 Aralık 2009

arkadaslar ben css div taglarıyla basi bir site yaptım ana icerige yani genıs acıklamanın oldugu kismin arka palnına resim koydum yanlız yazı ekledikce yazı resmin disina tasıyor resim aynı boyutta buymuyor o sorunu nasıl halledebilirim yardımcı olurmusuunuz

Pixel

Pixel
05 Aralık 2009

Çok Teşekkür Ederim :)

Peki ya sizin düşünceleriniz?

Facebook Grubumuz Twitter Wordpress Linked in Google Friendfeed RSS Beslemesi Feedburner RSS

Abonelik

Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.

yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi). Hosting sponsoru WebGrup.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

WordPressValid XHTML 1.0 TransitionalBu web sitesi ne kadar popüler?php