background özelliği, elementin beş farklı arka plan özelliğinin bir veya bir kaçının birden ayarlanmasını sağlar. Bu arka plan özellikleri şunlardır: backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition ve backgroundRepeat
DOM Sözdizimi
element.style.background= "renk | resim | tekrar | sabitmi | konum"
CSS Sözdizimi
background: renk | resim | tekrar | sabitmi | konum
Bu özelliklerin hepsinin birden kullanılmasına gerek yoktur. Sadece biri veya birkaçı aralarında boşluk bırakarak birbirleriyle kombine edilebilir. Fakat, bu şekildeki kullanımda dikkat edilmesi gereken konu: background özelliğinin, belirtilmeyen değerlere varsayılan değerlerini atamasıdır. Örneğin, aşağıdaki iki ifadeden birincisi, ikinci ile aynı anlama gelmektedir.
background: blue --> background: blue none repeat scroll 0px 0px;
Burada ilk ifadenin kullanımı, eğer daha önce tanımlanmış resim ve yerleşim değerleri varsa bunların hepsinin temizlenmesine neden olacaktır.
Aşağıdaki örnek, background, width, height, text-align, margin, text-decoration, color, font-weight, margin-right ve float özelliklerinin kullanımını göstermektedir.
<style type="text/css">
#ornekDiv
{
background: url(background_parlakDunya.jpg) black top left no-repeat;
width:500px;
height:150px;
text-align:right;
}
#ornekBaslik
{
margin:10px;
text-decoration:underline;
}
a.ornekLink
{
color:#C0C0F0;
font-weight:bold;
margin-right:10px;
}
</style>
<div id="ornekDiv">
<div style="float:right;">
<h2 id="ornekBaslik">Arka Plan Özellikleri</h2>
<a class="ornekLink" href="#">backgroundColor</a><br/>
<a class="ornekLink" href="#">backgroundImage</a><br/>
<a class="ornekLink" href="#">backgroundRepeat</a><br/>
<a class="ornekLink" href="#">backgroundAttachment</a><br/>
<a class="ornekLink" href="#">backgroundPosition</a>
</div>
</div>
Canlı Sonuç