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.

Attribution to: MnZ

Possible Suggestion/Solution #1

This is purely JS and CSS, try this :

document.getElementById('elementId').style.backgroundImage="url('{!$Resource.bluebg}')";

Attribution to: melmoussaoui

Possible Suggestion/Solution #2

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.

Attribution to: highfive

Possible Suggestion/Solution #3

This isn't really a Salesforce topic as much as it is the application of the CSS backgroundImage property.

You'll need to use the URLFOR function to get the path to the image in the static resource.

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

Attribution to: Mark Pond
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/33126