Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aron Schor [Dev]Aron Schor [Dev] 

Adding background image to a VF page.

I am having problems adding an image as a background to a VF page.  I only know the basics of HTML and I have been searching for a way to do so with no luck.  I tried following the steps on this page but nothing seemed to happen when I followed the steps and added this code.

https://success.salesforce.com/answers?id=90630000000grroAAA
<apex:stylesheet value="{!URLFOR($Resource.imageStyle, 'customCss.css')}"/>

I want to use the blue background image from this website, and I believe its a simple image that repeats if it helps.  Thanks.
http://www.acmeunited.com/

Thanks.
Best Answer chosen by Aron Schor [Dev]
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello,

You have to change the selectors:
  
<style type="text/css">
    .apexp .pbHeader, .apexp .pbBody { 
		background-image: url("{!$Resource.YourImageAPIStaticResource}") !important; 
	}
</style>

Or if you do not want he Hi background replaced:
  
<style type="text/css">
    .apexp .pbHeader, .apexp .pbBody  { 
		background-image: url("{!$Resource.YourImageAPIStaticResource}") !important; 
	}
</style>

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.

All Answers

Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello,

Can you share your css so we can have a look? Have you imported your background-image as a Static Resource?

Regards.
 
Aron Schor [Dev]Aron Schor [Dev]
I could be doing something wrong.  I uploaded the image as a regular image.

Created this CSS file, based on the URL given when I uploaded the file.
<style type="text/css">body { background-image: url("https://c.na16.content.force.com/servlet/servlet.FileDownload?file=015j00000007zm3") }  
</style>

I renamed the image in the zip file to be 015j00000007zm3 to be consistent.  Not sure if that is correct..
Aron Schor [Dev]Aron Schor [Dev]
I tried a few more things with no luck.

1
Css <style type="text/css">body { background-image: url("images/acmebackground.JPG") 
Page <apex:stylesheet value="{!URLFOR($Resource.imageStyle, 'customCss.css')}"/>

2
CSS <style type="text/css">body { background-image: url("{!URLFOR($Resource.imageStyle, 'images/acmebackground.JPG')}") }
Page <apex:stylesheet value="{!URLFOR($Resource.imageStyle, 'customCss.css')}"/>
     

http://stackoverflow.com/questions/19272958/visualforce-background-image-not-displaying

3
I also tried

CSS 
.table
{ 
background-image: url("{!URLFOR($Resource.imageStyle, 'acmebackground.JPG')}");
position: relative;
}  

Of course, I uploaded imageStyle.zip.

http://salesforce.stackexchange.com/questions/41918/visualforce-background-image

Any help would be appreciated.
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello,

Perhaps you are having a css specificity problem.  Try one the code below:
  
<style type="text/css">
	body { background-image: url("{!$Resource.YourImageAPIStaticResource}") !important; 
</style>

Furthermore, if it works, you also can try the original way you were doing loading a css file but you have to pay extra attention to how referencing a Static Resource works:

http://www.salesforce.com/docs/developer/pages/Content/pages_resources_reference.htm (http://www.salesforce.com/docs/developer/pages/Content/pages_resources_reference.htm" target="_blank)

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello, 

Here's a correction of the code above:
  
<style type="text/css">
	body { background-image: url("{!$Resource.YourImageAPIStaticResource}") !important; }
</style>

 
Aron Schor [Dev]Aron Schor [Dev]
I tried.

<style type="text/css">
body { background-image: url("{!$Resource.imageStyle}") !important; }
</style>

It turned the the SalesForce background blue, but not the Visual Force section..  I couldn't read my Name, Setup or Help because the color in that area turned blue and it was a lighter blue than the background color, but the Visual Force section was still white.

I'll try to read that resource you posted and see if I get another idea to try.

Thanks for the quick reply.
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello,

I see, so it worked for the background but not for where you were looking for it to work. May you share your visualforce code highlighting where you want to get the background applied so I can help you?
Aron Schor [Dev]Aron Schor [Dev]
I want the background to display in the section from "Hi.." until the end of Resources.  It looks like what happens is the image is shown in the SalesForce section.  Code (remember I am new and this is a basic page) and image are below.  Thanks!

<apex:page >
<apex:pageBlock title="Hi {!$User.FirstName}!  Welcome to the CS App!"> 
<html>  
<head>
<title>Welcome to the Acme CS SalesForce App</title>
</head>
<apex:form >
<apex:image url="https://c.na16.content.force.com/servlet/servlet.FileDownload?file=015j00000007h6V">
</apex:image>
</apex:form>
<style type="text/css">
body { background-image: url("{!$Resource.imageStyle}") !important; }
</style>
<B>
<font size="6" face="Arial" color="Blue">
Resources
</FONT>
</B>
<PRE>
<font size="4" face="Arial">
<A HREF="https://c.na16.visual.force.com/apex/Syspro">Syspro</A> info (Orders, Samples, RMAs)
<A HREF="https://c.na16.visual.force.com/apex/Logo">Logo</A> info for FAO, Pac-Kit.
</FONT>
</PRE>
</html>
</apex:pageBlock>
</apex:page>

Top
Aron Schor [Dev]Aron Schor [Dev]
I should add I am aware making the background blue will make the txt hard to read but I plan on changing the font color and possibly trying to make a nav bar.
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello,

You have to change the selectors:
  
<style type="text/css">
    .apexp .pbHeader, .apexp .pbBody { 
		background-image: url("{!$Resource.YourImageAPIStaticResource}") !important; 
	}
</style>

Or if you do not want he Hi background replaced:
  
<style type="text/css">
    .apexp .pbHeader, .apexp .pbBody  { 
		background-image: url("{!$Resource.YourImageAPIStaticResource}") !important; 
	}
</style>

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.
This was selected as the best answer
Aron Schor [Dev]Aron Schor [Dev]
What's the difference between the two?  I tried one and nothing seemed to happen.  There is a graphics person here who is pretty busy and I might check with him and then check the resource you sent.  I appreciate the time!  I'll post a follow up.  I want to give you credit for your help.  I am sure there is something basic I am missing and I don't want to take up too much of your time.
Aron Schor [Dev]Aron Schor [Dev]
Got it working!  Next up trying to get the top nav to work.  I found a resource that shows code but again it seems to be displaying the SalesForce section and not the body section (even though I used the body tag.)
Matt Cooper 7Matt Cooper 7
Aron, how did you get it to work?  I am dealing with the same issue where the outside background is updating to my image, but not the actual VF page I want the image to be under.
Aron Schor [Dev]Aron Schor [Dev]
Hi Matt,

Hopefully this might help...I did this awhile ago and some of the code might be for the Nav bar.

<STYLE> .apexp .pbHeader, .apexp .pbBody {background-image: url("https://c.na16.content.force.com/servlet/servlet.FileDownload?file=015j00000008QNp") !important; } * </STYLE>

Let me know!