Wordpress

Wordpress Yakuter

Tatilde sona mı yaklışıyoruz ne :( Twitter

546 takipçi

CSS ile Arkaplan Resmi

15 Eylül 2006

7.646 Okunma

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

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.

Sponsor Olmak İstiyorum!

Bu Yazıya Ait Yorumlar

ikra.web.tr
05 Aralık 2007

çok teşekkür ederim
faydalandım

Bilal
09 Aralık 2007

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

Muhammed Ak
15 Aralık 2007

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

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
29 Ocak 2008

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

Ersin EEN
02 Şubat 2008

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

Ersin ENE
02 Şubat 2008

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

Yorumunuz onay bekliyor.

Avşa
02 Mart 2008

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

Emre
04 Mart 2008

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

ümran
06 Mart 2008

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

Kutsal
17 Mart 2008

Teşekkürler. çok faydalı oldu

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
19 Mart 2008

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

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
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
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
07 Haziran 2008

Teşekkürler Abi

azmiii
16 Haziran 2008

yorumlardan bile bilgi alabiliyoruz teşekkürler ;)

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üğü
09 Ekim 2008

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

EfsaneFenerli
12 Ekim 2008

19, mesaja cevap verebilirmisiniz ??

özkan
23 Kasım 2008

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

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
27 Aralık 2008

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

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
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!
07 Şubat 2009

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

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
03 Eylül 2009

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

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
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
05 Aralık 2009

Çok Teşekkür Ederim :)