CSS ile Background - İsmail KIRBAŞ ile Web Sitesi Tasarımı
İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa]
 Site Haritası 
 
Site Map
Ana SayfaYeriniz | Ana Sayfa | Makaleler | Programcılık | CSS | CSS ile Background

Diğer Yazılar
CSS Nedir?
Kısa Bilgiler Örnekler
CSS-P Konumlandırma
CSS 2
CSS ve XHTML ile Temel Sayfa Tasarımı


E-posta Gönderin Yorum Yazın
Güvenlik Kodu:6094Güvenlik Kodu:6094Güvenlik Kodu:6094Güvenlik Kodu:6094




En Son Okunan 10 Makale
  1. E-iş Süreçlerinin Uygulama Alanları
  2. AJAX a Giriş
  3. Illustrator Araç Kutusu
  4. SSL, SET ve Dijital Ödeme Sistemleri
  5. Yüksek Lisans Çalışmaları
  6. En Etkin Sloganlar
  7. Danışmanlık ve Yönetim
  8. B2B Nedir?
  9. Kariyerin yolları taştan...
  10. STORYBOARD Görsel Senaryo Hazırlamak
 
CSS ile Background>
Yazı Tipi KüçültYazı Tipi BüyütAna SayfaYazıcıdan ÇıkarPDF Belgesi Olarak GörüntüleFavorilerime EkleArkadaşıma Tavsiye EdeceğimRTF (Word Dokümanı) olarak görüntüle

CSS ile Background Özellikleri

Background dendiğinde akla hemen sitemizin zeminini oluşturan alan gelir ama background özelliğini sadece zeminde kullanmayız, mesela şu alanlarda da backgorund  ile sayfamızı şekillendirebiliriz.

BODY               { background: white url(http://www.ceviz.net/images/syl.jpg) }
BLOCKQUOTE   { background: #ffcc66 }
P                     { background: url(../images/zemin.gif) #f5f5f5 fixed }
TABLE              { background: #0c0 url(arkaplan.png) no-repeat bottom right }


Peki bu backgorundun özellikleri nelerdir bunlarla neler yapabilir, backgroundumuzu nasıl şekillendirebiliriz?

Bunun 5 temel metodu var.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background-Color 
Background-color ile zemine bir renk atarız. bu renk rgb, hex, renk ismi ya da transparan olabilir.  Kullanımı şu şekildedir;

Sayfa.bg1 { background-color: #000000; color: #FFFFFF;
/*zemin rengi siyah, text rengi beyaz */ }


Background-image
Background-image ise iki değer alabilir: None ya da bir imajın url'i.

Öreneğin;

Sayfa.bg2 { background-image: url(images/bgresim.gif) }

Background-repeat
Repeat için geçerli değerler repeat, repeat-x, repeat-y, ve no-repeat olmak üzere 4 adettir. Peki nedir repeat ve ne yapar bu 4 metoduyla. Repeat backgroundaki imajınızı sabit tutar ya da sağa sola, aşağı yukarı tekrar ederek kaymasını ya da kaymamasını sağlar. Genellikle no-repeat özelliği için kullanılsada belki bir yerlerde diğer özelliklerini bilmekte işinize yarayabilir.

  • a) Repeat: Backgroundunuzun yatay ve dikey kaymasını sağlar. 
  • b) Repeat-x: Backgroundunuzun dikey kaymasını sağlar.
  • c) Repeat-y: Backgroundunuzun yatay kaymasını sağlar.
  • d) No-repeat: Backgroundunuzun kaymamasını sağlar.

Bazen bir imajın sabit olarak backgroundda kalmasını isteriz işte no-repeat bunu sağlar.

Background-attachment
İki değer alır. Scroll ve fixed. Kullanımı aşağıdaki gibidir.
BODY { background: url(bgresim.gif);
        background-attachment: fixed }
Background-attachment özelliği isteğinize göre  background imajınızın kaymasını veya çalışma alanını kaplamasını sağlar.


Background-position

Bu özellik ile backgroundunuzu dilediğiniz gibi yerleştirme imkanına sahip olursunuz. Alacağı değerler length, percentage, top, center, bottom, left, right şeklindedir.
Örnekle açıklamak gerekirse, mesela bir tablomuz olsun ve bunun bir hücresine background imajı yerleştirmek istiyoruz ama imaj küçük biz yinede bu imajı koyacağız. Alt sağ köşeye yaslamak istiyoruz imajı o zaman şu şekilde yapacağız;

TD.bg1 { background-position: bottom right }
veya şöylede yapabiliriz

TD.bg1 { background-position: 100% 100% }
Bu konuyu biraz daha detaylı açıklamak gerekirse şunları ekleyebiliriz. background-position özelliği arkaplan resmi için başlangıç pozisyonunu belirler. Bu özellik  sadece blok seviye elemanlarına (block level elements) ve değiştirilmiş elemanlara  uygulanabilir. (HTML değiştirilmiş elemanları IMG, INPUT, TEXTAREA, SELECT ve OBJECT'i  kapsar)

Arkaplan pozisyonunu atamanın en kolay yolu aşağıdaki anahtar kelimeler iledir :

Yatay pozisyon ayarlamak için (left,center,right)
Dikey pozisyon ayarlamak için (top,center,bottom)

Arkaplan resminin pozisyonunu ayarlamak için aynı zamanda yüzdeler ve uzunluklarda kullanlabilir. Yüzde cinsinden uzunluklar elemanın boyutuna göre görecelidir. Uzunluklara izin  veriliyor olmasına ramen farklı ekran çözünürlüklerindeki işleyiş zayıflıklarından ötürü  kullanımları pek önerilmez.


Yüzdeleri veya uzunluklar kullanırken, yatay konum önce belirtilir, ve daha sonrada dikey konum belirlenir. 20% 65% gibi bir değer 20% yatay 65% dikey bir konum anlamına gelir. Benzer bi şekilde 5px 10px gibi bir değer 5 piksel sağa 10 piksel aşağı bir konum belirtmektedir.

Eğer sadece yatay konum için değer verilirse, dikey konum için değer varsayılan olarak %50 olarak verilir. Piksel cinsinden uzunluk ve yüzde değerlerin kombinasyonuna izin verilmektedir. Yine de, yüzde değerler ve piksel cinsinden değerler anahtar kelimeler ile birleştirilemezler.
Anahtar kelimeler aşağıdaki gibi yorumlanırlar :
    * top left = left top = 0% 0%
    * top = top center = center top = 50% 0%
    * right top = top right = 100% 0%
    * left = left center = center left = 0% 50%
    * center = center center = 50% 50%
    * right = right center = center right = 100% 50%
    * bottom left = left bottom = 0% 100%
    * bottom = bottom center = center bottom = 50% 100%
    * bottom right = right bottom = 100% 100%
Tasarım sırasında ayrıca kısa yazıma sahip olan 'background' özelliği de kullanılabilir ki bu özellik background-position özelliğine göre daha iyi desteklenmektedir.


Not: Yazılar konusundaki yorumlarınız için lütfen Yorum Yazın bölümümüzü kullanın.

Yazar : Şahin
Son Güncelleme : 30 Mayıs 2005, Pazartesi
Sayfa Sürümü : 1
Okunma Adedi : 8,736
Son Okunma : 2017-11-18 01:45:11
Kaynaklar : -

CSS-P KonumlandırmaCSS ile BackgroundCSS 2
© [Site Haritası]
| Makaleler | Seyir Defteri | Kaynaklar | İndirin | İletişim |

RSS dosyasını görmek için tıklayınız. RSS dosyasını görmek için tıklayınız.XML versiyonu için tıklayınız WAP versiyonu için tıklayınız Bu site DyNA İçerik Yönetim Sistemi üzerinde çalışmaktadır.
İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa
ismail kırbaş ile web sitesi tasarimi sitemap ismail kırbaş ile web sitesi tasarimi sitemap
  Sitemizde 4 kişi çevirimiçi | Bugün =29 | Dün =158 | Bu Ay=4,444 | Günlük En Fazla=1,109 tekil ziyaretçi