Responsive Reklam Alanı

Merhaba sevgili okurlar,

Final sınavlarımdan dolayı uzun bir zaman ayrı kaldık bu zaman zarfında sizlere ne bir ders ne de bilgilendirici bir makale sunabildim. Hazır tatile de girmişken daha çok bilgi alışverişinde bulunacağız. Bugünkü dersimiz css. Konusu ise css kodları ile sitemizin arkaplan resmini yerleştirmek ve gerekli ayarlamaları yapabilmek.

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.


1  body {
2  background-image: url(resimler/arkaplan.jpg);
3  background-repeat: repeat;
4  background-attachment: scroll;
5  background-color: white;
6  background-position: top-left;
7     }

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
Paylaşmak Güzeldir
Yazar
Yazar
Mango işletim sistemi ve Özellikleri? Webrazzi Ödülleri 2012′de Kazananlar Belli Oldu!
4 Yorum
  1. Yazar
    Emre

    Çok güzel anlatmışınızda ben ekledim hiç bişey olmadı neden olabilir ?

    http://www.zeynepcamci.org

  2. Yazar
    Misafir

    Çok süper bir site 🙂

  3. Yazar

    CSS yi tam olark nasıl ekliyoruz açıklayıcı anlatma imkanınız varmı. örneğin arkaplan resmi değiştirmek?

  4. Yazar

    Bir çok yere baktım fakat sadece buradaki işime yaradı. Kodları arkaplan rengi kodunun olduğu yerin yanına yapıştırdım ve arkaplan rengi kodunu sildim. Teşekkürler.

Bir yorum yazın
Siz de düşüncenizi belirtebilirsiniz.

Emre Supçin * Ecceplus WordPress Themes