CSS Background color, image, attachment, position, repeat



Kullanılabilir background özellikleri

1. background
2. background-color
3. background-image
4. background-attachment
5. background-position
6. 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(

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;

1. top left
2. top center
3. top right
4. center left
5. center center
6. center right
7. bottom left
8. bottom center
9. bottom right
10. x-% y-%
11. 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;

1. repeat (devamlı tekrar et)
2. repeat-x (X koordinatında tekrar et)
3. repeat-y (Y koordinatında tekrar et)
4. no-repeat (Sadece 1 (bir) kez görüntüle)

Kullanımı ise;

• # background-repeat: repeat-y;
• # background-repeat: no-repeat;

Kaynak: cssbahcesi

teşekkürler

Teşekkürler yararlı bilgiler var burada

tşkler

Teşekkürler...