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(){
//bluebg.jpeg is static resource 

Any help will be appreciated.


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

function change2Image(){

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.

This is purely JS and CSS, try this :


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)}')";
  • I tried your code, but it isn't working :( – MnZ Apr 18 '14 at 15:52
  • i called in this way <a href="#" onClick="javascript:change2Image()"><b><font >Image</font></b></a><br /> – MnZ Apr 18 '14 at 15:52
  • What does the source markup in the page have for the URL to the image? Does it have something like this:? document.body.style.backgroundImage = "url('')"; – Mark Pond Apr 18 '14 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.