Visualforce background image

Question

I'm trying to make an image the background of my Visualforce page. I've tried every single way I can think of to reference the image from static resources. I've created a zip file with both the image and the .css file and reference it from my apex page. Can someone who has successfully made an image a background share their code with me? I need step by step directions please, as I've tried using everyone else's ideas and tips from this page and other pages I've googled and it's simply not working. I have an image (StayConnected.jpg) and a .css file (style.css) zipped into a file called 'Image.zip'. I've uploaded that zip file to Static Resources and have named it 'Image'. I can change the background color in the .css but I can't simply make the background an image. I've been going at this for about a week now and I'm desperate for help.

The following is the code that isn't working.

.CSS file:

.table
{ 


background-image: url("Image/StayConnected.jpg");
position: relative;
}  

APEX page:

apex:stylesheet value="{!URLFOR($Resource.Image, 'Image/style.css')}"/

thank you for your help and consideration!

Answer 1

Change url("Image/StayConnected.jpg"); to

url("{!URLFOR($Resource.Image, 'Image/StayConnected.jpg')}");

Answer 2

Thank you all for your replies! I was able to figure out the issue. When I was zipping the folders (css and image folders) together I dropped them into a main folder and then zipped that folder, instead of selecting both the css and image folder and zipping it from there. It messed up my file paths when calling the static resource. Thanks again!

Answer 3

It appears that the CSS and image file are in the same folder, based on your code, so it should probably not need the directory prefix in the CSS file.