javascript - document.body.style.backgroundImage does not works -

i have problem document.body.style.backgroundimage tag. woking on local not on server.

<a href="roztoky.php" onclick = "document.body.style.backgroundimage = 'url(../img/roztoky.png)';"> 

on local, backgound switched no problem, on server backgroud cames few seconds , overwrited defalut

but if call that:

<a href="_section/roztoky.php" onclick = "document.getelementbyid('frame').style.backgroundimage = 'url(img/roztoky.png)';" target="a"> 

it works ...

any ideas?

use jquery

demo:

change

<a id="a" href="roztoky.php" onclick = "document.body.style.backgroundimage = 'url(../img/roztoky.png)';"> 

top

$('#a').on('click', function() {     $('body').css('background-image', 'url(/img/roztoky.png)'); }); 

and

<a id="b" href="_section/roztoky.php" onclick = "document.getelementbyid('frame').style.backgroundimage = 'url(img/roztoky.png)';" target="a"> 

to

$('#b').on('click', function() {     $('#frame').css('background-image', 'url(img/roztoky.png)'); }); 

or pure javascript

demo

    var button_a = document.queryselector("#a"),     button_b = document.queryselector("#b"),     myframe  = document.queryselector("#frame"); button_a.addeventlistener("click",function(e){     document.body.style["background-image"] = "url(https://c2.staticflickr.com/6/5530/11442019345_d50b753156.jpg)"; },false); button_b.addeventlistener("click",function(e){     myframe.style.style["background-image"] = "url(https://c2.staticflickr.com/4/3702/11442187163_fdd370b657_n.jpg)"; },false); 

html::

<a id="a">body background image</a> <a id="b">change frame background</a> <div id="frame"></div> 

css::

#frame{     width:100%;     height:320px; }  a{     padding: 6px 12px;     background:#ccc;     border-radius:6px;     cursor:pointer;     color:white; }