[SalesForce] Change VF background with Javascript reference to a Static Resource image

I have made a small script to change the background color of my VF page. Here's my script

 <script language="JavaScript">
 function changeBGC(color){
     document.bgColor = color;
 }

And here's in the VF..

<h4>Change the Background Color</h4>
<a href="#" onClick="javascript:changeBGC('#CCFFFF')">
    <b><font color='#000099'>Blue</font></b>
</a><br />

It's working fine, but I was wondering if I could add a link to a static resource to use to to change the background to an Image? Here's what I tried…

function change2Image(){
    document.background=url"{!$Resource.bluebg}";
}
//bluebg.jpeg is static resource

Any help will be appreciated.

Best Answer

I haven't try like that earlier. But it'll work something like,

function change2Image(){
   document.body.style.backgroundImage="url('{!$Resource.bluebg}')";
}

Things to Note

  • bluebg should be directly an image, not a zip.
  • Be careful when changing the background of your visualforce page, because it's an iframe within the outer webpage. So you need to identify which background you need to change if you are talking about document background.
Related Topic