CSS Background Özelliği

CSS Zemin İşlemleri

CSS ile bir elementin arkaplan rengini değiştirmek veya zemine resim koymak mümkündür.

Bu sayfanın tamamına olabildiği gibi herhangi bir HTML elementinin arkaplanı da olabilir.

CSS bize zemin işlemleri için şu özellikleri sunar:

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

CSS ile Zemin Rengi Değiştirme (CSS background-color özelliği)

Bir HTML elementinin zemin rengini değiştirmek için background-color özelliği kullanılır.

Örneğin bir sayfanın zemin rengini değiştirmek istiyorsanız:

body {
    background-color: #eeccff;
}

Daha önceki derslerde anlatıldığı gibi CSS renk değerleri;

• Renk adı kullanılarak (background-color:red)
• RGB değer vererek (background-color:rgb(255,0,0))
• Hex değer vererek (background-color:#ff0000)

gibi farklı şekillerde verilebilir.

Aşağıdaki örnekte 3 farklı HTML elementinin zemin rengi değiştirilmiştir:

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

CSS ile Zemine Resim Koymak (background-image)

background-image özelliği ile herhangi bir HTML elementinin zeminine resim koyabilirsiniz.

Varsayılan olarak koyduğunuz resim kendini tekrar eder. Örneğin küçük bir resmi arkaplan yaparsanız, tüm sayfa bu resimle dolar.

Bir HTML elementine zemin resmi şu şekilde koyulur:

body {
    background-image: url("/img/ice-age.jpg");
}

Arkaplan Resmini Yatayda veya Dikeyde Tekrar Ettirmek

Varsayılan olarak arkaplana koyduğunuz resim hem yatay hem de dikeyde tekrar eder.

Bazen resimleri sadece yatayda veya sadece dikeyde tekrar ettirmek isteriz.

Bu örnekteki zemin resmi yatayda tekrar ederse güzel görünecektir:

body {
    background-image: url("/img/yatay-bg.jpg");
}

Yukarıdaki resim yatayda tekrar etseydi çok daha güzel görünecekti. Resmi yatayda tekrar eder şekilde konumlandırmak için  background-repeat: repeat-x; kullanırız.

body {
    background-image: url("/img/yatay-bg.jpg");
    background-repeat: repeat-x;
}

Arkaplan resmini dikeyde tekrar ettirmek için background-repeat: repeat-y; kullanabilirsiniz:

body {
    background-image: url("/img/dikey-bg.jpg");
    background-repeat: repeat-y;
}

Arkaplan Resminin Tekrar Etmemesini Sağlamak : no-repeat

Arkaplan resminin ne yatayda ne de dikeyde tekrar etmesini istemiyorsanız o zaman background-repeat:no-repeat olarak ayarlamalısınız.

body {
    background-image: url("/img/ice-ace.jpg");
    background-repeat: no-repeat;
}

Arkaplan Resminin Konumunu Ayarlamak

Arkaplana koyulan resmin konumunu  background-position  ile değiştirebilir.  background-position özelliği bir kaç değer alır:

• top (üstte)
• bottom (alta)
• right (sağa)
• left (sola)
• center (ortala)

body {
    background-image: url("/img/ice-age.jpg");
    background-repeat: no-repeat;
    background-position: right top;
}

Arkaplan Resminin Sabitlenmesi

Bir sayfada çok fazla yazı varsa, sayfayı aşağı kaydırdığınız zaman arkaplan resmi de kaydırma ile birlikte hareket eder.

Eğer arkaplan resmini sabitlemek isterseniz background-attachment özelliğini kullanabilirsiniz.

body {
    background-image: url("/img/ice-age.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

CSS background Özelliğinin Kısa Yazımı

Yukarıda bahsedilen tüm özellikleri kısa olarak tek satırsa yazmak mümkündür.

Tüm arkaplan özellikleri background özelliği ile tek satırsa yazılabilir:

body {
    background: #ffffff url("/img/ice-age.jpg") no-repeat right top;
}

Bu kısa yazımda, sırası ile yer alan özellikler şunlardır:

• background-color : zemin rengi
• background-image : zemin resmi
• background-repeat : zemin resminin tekrarı
• background-attachment : zemin resminin sabitlenmesi
• background-position : zemin resminin konumu

Sıralama sırasında diğerleri düzgün olduğu müddetçe bir özelliğin eksik olması sorun çıkartmaz.