Css ile web sitemizin arkaplan özellikleri için background parametresi kullanılmaktadır. Background parametresine ait özellikler:
özellikleri ile arkaplan rengi belirleme, resim ekleme, tekrarı, sabit kalıp kalmayacağı ve konum özellikleri belirlenmektedir.
Background-color özelliği ile css dilinde html ögelerinin veya sayfanın arkaplan rengini belirlemek için kullanılmaktadır. Arkaplan rengi css renk kodları veya html renk kodları dersinde anlattığımız renklerin ingilizce isimleri, hex kodları veya rgb kodları ile belirlenebilmektedir.
Background-color Özelliği Kullanımı 1:
Sayfanın arkaplan rengi, renk değerine rengin ingilizce ismi girilerek belirlenen örnektir.
<style type="text/css">
body{
background-color:red;
}
</style>
Background-color Özelliği Kullanımı 2:
Sayfanın arkaplan rengi, renk değerine rengin hex kodu girilerek belirlenen örnektir.
<style type="text/css">
body{
background-color:#f01350;
}
</style>
Background-color Özelliği Kullanımı 3:
Sayfanın arkaplan rengi, renk değerine rengin rgb kodu girilerek belirlenen örnektir.
<style type="text/css">
body{
background-color:rgb(100,50,200);
}
</style>
Background-image özelliği css dilinde html ögelerinin veya sayfanın arkaplanına resim eklemek için kullanılmaktadır. Background-image özelliği url parametresi ile birlikte kullanılmaktadır. Url parametresine resim adresi girilmektedir.
Background-image özelliği ile istediğimiz resmi web sayfamızın veya html ögelerine arkaplan olarak ekleyebiliriz.
Kullanım Şekli:
body {
background-image:url("resim_adresi");
}
Background Özelliği Kullanımı 1:
Herhangi bir html ögesinin arkaplanına resim ekleme işleminin nasıl yapıldığını kodlardan öğrenebilirsiniz. Paragraf genişledikçe arkaplan resmi çoğalacaktır.
p{
background-image:url("resim_adresi");
}
Background Özelliği Kullanımı 2:
Herhangi bir web sayfasının arkaplanına resim ekleme işleminin nasıl yapıldığını aşağıdaki kodlardan öğrenebilirsiniz.
Html web sayfalarında arkaplana eklenen resmin boyutu küçük ise resim otomatik olarak tekrar etmektedir. Yani resim ile sayfayı doldurana kadar çoğaltmaktadır.
Bilgi: Background-repeat özelliği background-image özelliği ile birlikte kullanılmak zorundadır.
Background-repeat özelliği ile resmin tekrar edip etmeme işlemi kontrol edilebilmektedir. Background-repeat özelliği 4 farklı değer alabilmektedir. Bunlar:
Arkaplana eklenen resmin hem dikey hem yatay olarak tekrar etmesi istenilen durumda bu değer kullanılmaktadır. Bu değer ile sayfa dolana kadar tekrar etme işlemi yapar. Varsayılan değer olarak kullanılmaktadır. Arkaplana resim ekleme işlemi yapıldığında background-repeat özelliği kullanılmazsa tekrar etme işlemi yapacaktır. (TEKRAR ET)
body {
background-image:url("resim_adresi");
background-repeat:repeat;
}
Arkaplana eklenen resmin tekrar etmesini istemediğimiz durumlarda no-repeat değeri kullanılmaktadır. (TEKRAR ETME)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
}
Arkaplana eklenen resmin x yönünde yani yatay olarak tekrar etmesini istediğimiz durumlarda repeat-x değeri kullanılmaktadır. (YATAY OLARAK TEKRAR ET)
body {
background-image:url("resim_adresi");
background-repeat:repeat-x;
}
Arkaplana eklenen resmin y yönünde yani dikey olarak tekrar etmesini istediğimiz durumlarda repeat-y değeri kullanılmaktadır.(DİKEY OLARAK TEKRAR ET)
body {
background-image:url("resim_adresi");
background-repeat:repeat-y;
}
Background-attachment özelliği, arkaplan eklediğimiz resmin kaydırma çubuğu ile haraket edip etmeyeceğini belirlemek için kullanılmaktadır. Background-attachment özelliği ile 2 değer kullanılmaktadır. Biri arkaplan resminin kaydırma çubuğu ile hareket etmesini sağlamak için diğeri ise resmin sabit kalması için kullanılmaktadır. Bu değerler:
Arkaplana eklenen resmin kaydırma çubuğu ile birlikte hareket etmesini sağlamak için kullanılmaktadır.
body {
background-image:url("resim_adresi");
background-attachment:scroll;
}
Arkaplana eklenen resmin kaydırma çubuğu ile birlikte hareket etmemesini yani sabit kalmasını sağlamak için kullanılmaktadır.
body {
background-image:url("resim_adresi");
background-attachment:fixed;
}
Background-position özelliği, arkaplan resminin konumunu sayfadaki pozisyonunu belirlemek için kullanılmaktadır.
Bu değer kullanıldığında eklenen resim sayfanın üst sol konumunda bulunacaktır.(ÜST SOL)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:top left;
}
Bu değer kullanıldığında eklenen resim sayfanın üst orta konumunda bulunacaktır.(ÜST ORTA)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:top center;
}
Bu değer kullanıldığında eklenen resim sayfanın üst sağ konumunda bulunacaktır.(ÜST SAĞ)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:top right;
}
Bu değer kullanıldığında eklenen resim sayfanın orta sol konumunda bulunacaktır.(ORTA SOL)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:center left;
}
Bu değer kullanıldığında eklenen resim sayfanın orta orta yani tam orta konumunda bulunacaktır.(ORTA ORTA)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:center center;
}
Bu değer kullanıldığında eklenen resim sayfanın orta sağ konumunda bulunacaktır.(ORTA SAĞ)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:center right;
}
Bu değer kullanıldığında eklenen resim sayfanın alt sol konumunda bulunacaktır.(ALT SOL)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:bottom left;
}
Bu değer kullanıldığında eklenen resim sayfanın alt orta konumunda bulunacaktır.(ALT ORTA)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:bottom center;
}
Bu değer kullanıldığında eklenen resim sayfanın alt sağ konumunda bulunacaktır.(ALT SAĞ)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:bottom right;
}
Yüzde değeri kullanıldığında eklenen resmi yatay ve dikey olarak yüzde ile konum vermemizi sağlar.İlk yüzde yatay konumun, İkinci yüzde dikey konumu ayarlamak için kullanılır.Örneğin: background-position:50% 60%; (YÜZDE İLE KONUM ATAMA)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:50% 60%;
}
rkaplana eklenen resme yatay ve dikey olarak piksel ile konum vermek için kullanılır. İlk piksel yatay, İkinci piksel dikey konumu ayarlamak için kullanılır. Örneğin: background-position:250px 200px; (PİKSEL İLE KONUM ATAMA)
body {
background-image:url("resim_adresi");
background-repeat:no-repeat;
background-position:250px 200px;
}
Önceki Ders: Css Renkler | Sonraki Ders: Css Boyut |