rankend
Administrator
 Uyarı Sev. : 
 Mesaj Sayısı : 2210
 Paylasım Gücü : 5979
 Rep Point : 131
 Kayıt tarihi : 20/10/09
 Yaşım : 32
 Nerden : Bodrum
 Ruh : 
 Grafik Düzey : Profesyonel
 Tarayıcın : Chrome
 | | Konu: CSS Background color, image, attachment, position, repeat Paz Kas. 29, 2009 10:27 am | |
| CSS Background color, image, attachment, position, repeat
Kullanılabilir background özellikleri
background
background-color
background-image
background-attachment
background-position
background-repeat
1. Background
Belirtilen nesnenin arkaplan rengini değiştirir. Background, kendine ait tüm alt olayları kapsayarak yada sadece renk tanımlanarak kullanılabilinir. Görevi için alabileceği değerler;
background: #fff;
background: #fff url(img.gif);
background: #fff url(img.gif) repeat-x;
background: #fff url(img.gif) repeat-x fixed;
background: #fff url(img.gif) no-repeat fixed 10px 50%;
2. background-color
Sadece arkaplan rengini değiştirir. Herhangi bir pozisyon belirtilemez, resim eklenemez. RGB yada HEX renk kodları, renk isimleri ile tanımlanabilir. Eğer transparan olması istenirse transparent değeri verilmelidir.
background-color: black;
background-color: #922;
3. background-image
Sadece arkaplan için resim eklenir. Herhangi bir renk tanımlanamaz, pozisyon belirtilemez.
background-image: url(cssrehberi.gif);
background-image: url(http://www.cssrehberi.com/resimler/cssrehberi.gif);
4. background-attachment
Belirtilmiş olunan arkaplan resminin sayfadaki durumunu ifade eder. İki değer alabilir. Scroll ve fixed.
Scroll, arkaplan resminin scroll (browser hareket barı) duruma bağlı olarak değişebilir olduğu değeridir.
Fixed, arkaplanı belirtilen konumda sabitler. Sayfa yukarı aşağı hareket etse dahi orada sabit asılı kalır.
background-attachment: scroll;
background-attachment: fixed;
5. background-position
Belirtilmiş olunan arkaplan resminin sayfadaki pozisyon durumunu ifade eder. Alabileceği genel değerler;
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Birinci verilen değer yükseklik üzerindeki konumu, ikinci değer ise genişlikteki konumunu ifade eder. Şayet tek değer atanmış ise, o ölçüyü hem yüksekliğe hemde genişliğe göre değerlendirir.
Kısaca üst veya alt, sağ veya soldan itibaren konumlanacağı alan belirtilir. Kullanım şekli;
background-position: top right;
background-position: 25% 50%;
background-position: 50%;
background-position: 0 50px;
6. background-repeat
Belirtilmiş olunan arkaplan resminin sayfadaki tekrar derecesini belirtir. İster 1 kez görüntülenmesini, isterseniz X yad Y koordinatlarında tekrar etmesini, istersenizde devamlı tekrarlanmasını sağlayabilirsiniz. Alabileceği genel değerler;
repeat (devamlı tekrar et)
repeat-x (X koordinatında tekrar et)
repeat-y (Y koordinatında tekrar et)
no-repeat (Sadece 1 (bir) kez görüntüle)
Kullanımı ise;
# background-repeat: repeat-y;
# background-repeat: no-repeat;
Kaynak: cssbahcesi | |
|
