visualforce background image not displaying

Question

I am trying to implement a simple VF tabbed interface. I have uploaded a zip file containing a background image inside "images" folder and the required css as

     <style type="text/css">body { background-image: url("images/back.jpeg") }  

Following is how I implemented.

    <apex:page id="thePage" sidebar="false" showHeader="false" tabstyle="Invoice_Statement__c"        standardController="Invoice_Statement__c" standardStylesheets="false">
   <apex:image url="{!$Resource.header}" width="1250" />
   <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>
   <style type="text/css">
   p { background-color: ;}
       tabPanel{ background-color:blue;}
       .activeTab {background-color: #236FBD; color:white; background-image:none}
       .inactiveTab { background-color: lightgrey; color:black; background-image:none}
   </style>

   <apex:tabPanel switchType="client" selectedTab="name1" id="theTabPanel" tabClass="activeTab"    inactiveTabClass="inactiveTab">
   ..
   ..
   ..
    </apex:tabPanel>
    </apex:page>

My problem is that background is not displaying. I followed this link--> http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_custom.htm I have used

   <apex:image url="{!$Resource...}" width="1250" />

and its working fine, but I'm unable to get a background image for my app. Any suggestions?

Thanks in advance MnZ

Answer 1

It's not much different than how you are refering to the stylesheet stored in static resources.

<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>

You have to go by the same principle to add the reference to static resource in tour css. Catch point is that your style declaration needs to be on the VF page so that it gets rendered by the force.com server. Assuming your images forlder is in the myStyles zip file as static resource:

<style type="text/css">body { background-image: url("{!URLFOR($Resource.myStyles, 'images/back.jpeg')}") } 

Answer 2

In your CSS file (inside the static resource) add "../" before images and add some styles:

body {
background: url("../images/back.jpeg") no-repeat top fixed;
background-size: 100%;
}