Bir web
sayfasının içindeki ögelerin (table, div, p v.b.) arkaplanının rengini
veya arkaplan resmini değiştirmenin birkaç yolu vardır.
İlk ve asıl yöntem: html kodlarınızın
tagları arasında yer alan
tagları arasında
tanımlayarak yapmaktır.
Şöyle ki:
body {
background: #FACD50;
}
buradaki background kodu body
öğesinin rengini belirtmektedir. # işaretinin yanındaki 6 haneli ve
onaltılık tabanda yazılan sayı renk kodunu tanımlamaktadır.
Aynı şekilde background kodunun yanına : dan sonra url(URL veya URI adresi) yazılarak arkaplanın resmi tanımlanabilir. Örneğin:
body {
background: url(http://resminbul.com/resim01.jpg);
}
gibi.
Bu iki tanımlama aynı anda kullanılabilir.
body {
background: url(http://resminbul.com/resim01.jpg) #A53E5D;
}
gibi.
Buradaki #FFFFFF renk kodları yerine "red", "white", "blue" v.b bilinen renk etiketlerini de kullanabilirsiniz.
body {
background: red url(http://resminbul.com/resim01.jpg);
}
gibi.
Ayrıca background-repat koduyla arkaplan resminin tekrarlanma yöntemini belirtebilirsiniz. Burada repeat, repeat-x, repeat-y, no-repeat seçeneklerini kullanabilirsiniz.
body {
background: red url(http://resminbul.com/resim01.jpg);
background-repeat: no-repeat;
}
gibi.
background-attachment kodu ile arkaplanın srcoll bar ile birlikte hareket etmesini ya da sabit durmasını sağlayabilirsiniz. scroll ya da fixed seçeneklerini kullanabilirsiniz.
body {
backgorund: red url(http://resminbul.com/resim01.jpg);
background-repat: no-repeat;
background-attachment: fixed;
}
gibi.
background kodunun yanında background-position belirtmesi de kullanabilirsiniz. Bu belirtimde top, center, bottom dan biri ile aynı anda left, center, right
den birini kullanabilirsiniz. Ya da ekrana göre yalnızca yatay ve düşey
konumunu belirten yüzdeler kullanabilirsiniz. Buradaki değerleri
background-position kodunun yanında kullanabileceğiniz gibi direk
olarak background kodunun yanında da kullanabilirsiniz.
Örneğin:
body {
backgorund: red url(http://resminbul.com/resim01.jpg);
background-repat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
veya
body {
backgorund: red url(http://resminbul.com/resim01.jpg);
background-repat: no-repeat;
background-attachment: fixed;
background-position: 50% 0%;
}
ya da
body {
backgorund: red url(http://resminbul.com/resim01.jpg) top center;
background-repat: no-reeat;
background-attachment: fixed;
}
gibi.
Yukarıdaki açıklamalar bir HTML sayfasının tagları arasında geçerlidir.
Backgroundun özelliklerini tanımlamayı tagları arasında yapmak istersek;
şeklinde yermeliyiz.
Ya da yine body bölümünde başka bir tagda, örneğin:
şeklinde verebiliriz.
Not: Ama tagından önce , , , , v.b. taglardan başka tag kullanamayız. Örneğin veya taglarını tagından önce kullanılmaz.