CSS Arkaplanlar - Backgrounds

CSS Arkaplan Rengi - Background Color

"background-color" özelliği HTML/XHTML etiketlerine arkaplan rengi vermek için kullanılır. Aşağıda ki CSS kodu;

• Tüm " div " etiketlerinin arkaplan renklerini gri yapacak,
• Id Seçicisi "paragraf_stilim" olan etiketin arkaplanını mavi yapacak,
• Class Seçicisi "ozel_stil" olan tüm etiketlerin arkaplan rengi yeşil olacak.

div {
    background-color:gray;
}

#paragraf_stilim {
    background-color:blue;
}

.ozel_stil {
    background-color:green;
}

CSS Arkaplan Görseli - Background Image

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

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

CSS Arkaplan Görseli Tekrarı - Background Image Repeat

"background-repeat" özelliği için 4 ayrı değer bulunmaktadır.

• background-repeat:repeat; (Eklenen görsel küçük gelirse sayfa doluncaya kadar görsel hem yatay olarak hemde dikey olarak tekrar edecektir. Bu özellik yazılmasa bile CSS varsayılan olarak bunu yapacaktır.)
• background-repeat:no-repeat; (Eklediğimiz görsel hiçbir şekilde tekrar etmesin istiyorsak bu özelliği kullanacağız.)
• background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak tekrar etsin istiyorsak bu özelliği kullanacağız.)
• background-repeat:repeat-y; (Eklediğimiz görsel dikey olarak tekrar etsin istiyorsak bu özelliği kullanacağız.)

Örnek olarak görelim:

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

Background özelliğine arkaya arkaya değerler verilebilir. Örnek;

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

CSS Arkaplan Görseli Pozisyonu - Background Image Position

Bu özellik, görselin sayfada ki pozisyonunu belirler. "background-position" özelliği için 11 ayrı değer bulunmaktadır.

• background-position:top left; (Bu bildirimi kullandığımızda görselimiz üstün solunda yer alacak.)
• background-position:top center; (Bu bildirimi kullandığımızda görselimiz üstün ortasında yer alacak.)
• background-position:top right; (Bu bildirimi kullandığımızda görselimiz üstün sağında yer alacak.)
• background-position:center left; (Bu bildirimi kullandığımızda görselimiz ortanın solunda yer alacak.)
• background-position:center center; (Bu bildirimi kullandığımızda görselimiz ortanın ortasında yer alacak.)
• background-position:center right; (Bu bildirimi kullandığımızda görselimiz ortanın sağında yer alacak.)
• background-position:bottom left; (Bu bildirimi kullandığımızda görselimiz altın solunda yer alacak.)
• background-position:bottom center; (Bu bildirimi kullandığımızda görselimiz altın ortasında yer alacak.)
• background-position:bottom right; (Bu bildirimi kullandığımızda görselimiz altın sağında yer alacak.)
• background-position:x% y%; (Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar. İlk yüzde yatayın, ikinci yüzde ise dikeyin pozisyonudur. Örnek: background-position:50% 75%; )
• background-position:xpos ypos; (Görselimize yatay ve dikey olarak pixel bakımından pozisyon vermemizi sağlar. İlk pixel 'li rakam yatayın, ikinci pixel 'li rakam ise dikeyin pozisyonudur. Örnek: background-position:50px 100px; )

Birkaç örnek daha görelim...

body {
    background:url('arkaplan.jpg') no-repeat;
    background-position:top left;
} body {
    background:url('arkaplan.jpg') no-repeat bottom right;
} body {
    background:url('arkaplan.jpg') no-repeat 50% 75%;
} body {
    background:url('arkaplan.jpg') no-repeat 50px 100px;
}

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ğıda ki kodu kullanmalıyız. (Varsayılan olarak seçili olan özellik budur, ekstradan yazılmasına gerek yoktur.)

body {
    background:url('arkaplan.jpg') no-repeat;
    background-attachment:scroll;
}

Arkaplan görselinin kaydırma çubuğu ile birlikte hareket etmemesini istiyorsak aşağıda ki kodu kullanmalıyız.

body {
    background:url('arkaplan.jpg') no-repeat;
    background-attachment:fixed;
}