CSS Arkaplan – Backgrounds

CSS Arkaplan denilince herkesin aklına Arkaplan rengi yada görseli gelmekte ancak CSS Arkaplan bununla ve yahut bunlarla sınırlı değil. Her konuda olduğu gibi bu konuda da CSS sınır tanımıyor ve birbirinden özel kodlarla sayfanıza estetik katmaktadır.

CSS Arkaplan

Her ne kadar CSS Arkaplan’ı genellikle Body için kullansak ta bu diğer etiketlerde kullanmadığımız anlamına gelmez. CSS Arkaplan kodları tüm etiketler, İd ve Classlar için geçerlidir. Gelin bunlardan önemli olanları beraber inceliyelim…

1. CSS Arkaplan Rengi – Background Color

CSS Arkaplan Rengi adından da anlaşılacağı üzere belirli bir etiket, İd veya Class’a Arkaplan rengi vermektedir. Aşağıda Etiket, İd ve Class ile örneklenmiş Background Color örnekleri bulunmaktadır.

body {
    background-color: green;
}

#legalyazilim {
    background-color: red;
}

.legalyazilim {
    background-color: yellow;
}

Yukarıdaki CSS kodunda Body arka plan rengini Yeşile, legalyazilim İd taşıyan etiketlerin arka plan rengini Kırmızıya ve son olarak legalyazilim Class’ını taşıyan etiketlerin arka plan rengini ise sarı yapacaktır.

2. CSS Arkaplan Görseli – Background Image

“background-image” özelliği HTML/XHTML etiketlerine arkaplan rengi yerine arkaplan görseli eklemek için kullanılır. Örnek olarak görelim, aşağıdaki CSS kodu tüm sayfanın arkaplanına “legalyazilim.jpg” adlı görseli koyacaktır.

body {
    background-image: url('legalyazilim.jpg');
}

3. CSS Arkaplan Görseli Tekrarı – Background Image Repeat

“background-repeat” 4 ayrı özellik değeri barındırmaktadır. Bu özellikler ile Arkaplan Görselinin tekrarlanması konusunda net bir ifade belirtir.

background-repeat: repeat; (Eklediğiniz görsel küçük geldiğinde sayfa doluncaya kadar görsel hem dikey olarak hemde yatay olarak tekrar edecektir. Bu özelliği belirtmezseniz bile CSS varsayılan olarak bunu yapacaktır.)
background-repeat: no-repeat; (Eklediğiniz görsel hiçbir biçimde tekrar etmesin istiyorsanız bu özelliği kullanacağız.)
background-repeat: repeat-x; (Eklediğiniz görsel yatay biçimde tekrar edilmesini istiyorsak bu özelliği kullanacağız.)
background-repeat: repeat-y; (Eklediğiniz görsel dikey biçimde tekrar edilmesini istiyorsak bu özelliği kullanacağız.)

body {
    background-image: url('legalyazilim.jpg');
    background-repeat: no-repeat;
}

.legalyazilim {
    background-image: url('legalyazilim.jpg');
    background-repeat: repeat-x;
}

#legalyazilim {
    background-image: url('legalyazilim.jpg');
    background-repeat: repeat-y;
}

4. CSS Arkaplan Görseli Pozisyonu – Background Image Position

Bu özellikte, görselin sayfa içerisindeki pozisyonu belirler. “background-position” özelliği için 11 farklı değer bulunmaktadır.

background-position: top left; (Bu özelliği kullandığınızda görsel üst kısmın solunda yer alacak.)
background-position: top center; (Bu özelliği kullandığınızda görsel üst kısmın ortasında yer alacak.)
background-position: top right; (Bu özelliği kullandığınızda görsel üst kısmın sağında yer alacak.)
background-position: center left; (Bu özelliği kullandığınızda görsel ortanın solunda yer alacak.)
background-position: center center; (Bu özelliği kullandığınızda görsel ortanın ortasında yer alacak.)
background-position: center right; (Bu özelliği kullandığınızda görsel ortanın sağında yer alacak.)
background-position: bottom left; (Bu özelliği kullandığınızda görsel alt kısmın solunda yer alacak.)
background-position: bottom center; (Bu özelliği kullandığınızda görsel alt kısmın ortasında yer alacak.)
background-position: bottom right; (Bu özelliği kullandığınızda görsel alt kısmın sağında yer alacak.)
background-position: x% y%; (Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar. İlk değer yatayın, ikinci değer ise dikeyin pozisyonudur. Örnek: background-position: 50% 75%; )
background-position: xpos ypos; (Görselimize yatay ve dikey olarak pixel üzerinden pozisyon vermemizi sağlar. İlk değer yatayın, ikinci değer ise dikeyin pozisyonudur. Örnek: background-position: 50px 100px; )

body {
    background: url('legalyazilim.jpg') repeat-x;
    background-position: top left;
}

.legalyazilim {
    background: url('legalyazilim.jpg') repeat-x;
    background-position: center right;
}

#legalyazilim {
    background: url('legalyazilim.jpg') repeat-x;
    background-position: bottom center;
}

5. CSS Background Image Attachment

Arkaplana koyduğumuz görselin kaydırma çubuğu ile birlikte hareket etmesini veya etmemesini sağlayabiliriz. Arkaplan görselinin kaydırma çubuğu ile birlikte hareket etmesini istiyorsak aşağıdaki kodu kullanmalıyız. (Varsayılan olarak seçili olan özellik budur, ekstradan yazılmasına gerek yoktur.)

body {
    background: url('legalyazilim.jpg') repeat-x scroll;
}