backgroundImage özelliği, elementin arka plan resminin belirlenmesini sağlar.
DOM Sözdizimi
element.style.backgroundImage = "url( uri )"
element.style.backgroundImage = "none"
CSS Sözdizimi
background-image: url(uri)
background-image: none
| uri | Arka plan resmi olarak kullanılacak resmin URL adresi |
| none | Arka plan resmi yok |
backgroundImage özelliği ile birlikte backgroundColor özelliğinin kullanılması resmin bulunamaması veya herhangi bir sorun olması durumunda arka plan renginin belli olmasını sağlayacaktır. Bu yüzden, diğer arka plan özelliklerinin de belirtileceği düşünüldüğünde background özelliğini kullanmak daha pratik olacaktır.
Aşağıdaki örnek, mouseover ve mouseout olayları tetiklendiğinde backgroundImage ile arka plan resminin değiştirilmesini göstermektedir.
<style type="text/css">
#ornekKutu
{
height:100px;
background-image: url(cember_kapali.gif)
}
</style>
<div id="ornekKutu">
</div>
<script type="text/javascript">
function degistir()
{
var div = document.getElementById("ornekKutu");
div.style.backgroundImage = "url(cember_acik.gif)";
}
function duzelt()
{
var div = document.getElementById("ornekKutu");
div.style.backgroundImage = "url(cember_kapali.gif)";
}
document.getElementById("ornekKutu").onmouseover = degistir;
document.getElementById("ornekKutu").onmouseout = duzelt;
</script>
Test Edin