function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
JJJenkinsJJJenkins 

CSS & VF background image

I'm playing around with css and visualforce.  I believe this could be very useful but I'm having an issue with where to place the tags.

 

I have a static resource loaded called tablayoutCSS that is a zip file with some images and css.

 

One of the images is a background image we want to use for the whole page.  Where and how do I place this in visualforce?

 

Thanks,

sravusravu

Hi,

 

Try the following code:

 

<apex:page standardstylesheets="false">
<style type="text/css">
 body{
    margin : 0px;
    background-image : url({!URLFOR($Resource.tablayoutCSS, '<Image Name>')});
   //for example 'image.jpg'
    background-color:white;
    background-position : center 0;
    background-size : auto auto;
    background-attachment : scroll;
    background-repeat : no-repeat; 
    overflow :hidden;  
    }
</style>
<body>
     //put your visualforce page code between <body> tag.
</body>
</apex:page>

 Let me know if you have any concerns.
JJJenkinsJJJenkins

If i'm using a standard controller will this not work?

 

The background image didn't render but I did lose my scrollbars.  
sravusravu

It will work for the standardcontroller also. Could you please post your code.
JJJenkinsJJJenkins

Here you go! Thanks for the help.

 

<apex:page standardController="Opportunity" standardStylesheets="false" sidebar="false">
    <apex:stylesheet value="URLFOR{!$Resource.TabLayoutCSS}" />
    
    <<style type="text/css">
     body{
        margin : 0px;
        background-image : url({!URLFOR($Resource.TabLayoutCSS, 'www/background.png')});
        background-color:white;
        background-position : center 0;
        background-size : auto auto;
        background-attachment : scroll;
        background-repeat : no-repeat; 
        overflow :hidden;  
        }
  
        .activeTab{background-color: #D2AE00; color:white; background-image:none}
        .inactiveTab {background-color: #FFFFFF; color:black; background-image:none}
    </style>   
            <apex:form >
            <apex:tabPanel switchType="client" tabClass="activeTab" inactiveTabClass="inactiveTab" 
                           selectedTab="dealinfo">
                <apex:tab label="Sales Information" id="salesinfo">     
                        <apex:pageBlock >
                            <apex:pageBlockButtons location="Top">
                                <apex:commandButton value="Save" action="{!save}" id="save" style="display: none;" />
                                <apex:commandButton value="Cancel" action="{!cancel}" id="cancel" style="display: none;"/>                 
                            </apex:pageBlockButtons>
                            <apex:inlineEditSupport showOnEdit="save, cancel"/>
                            <apex:pageblockSection >
                                <apex:outputField value="{!Opportunity.FieldName}"/>
                                <apex:outputField value="{!Opportunity.FieldName}"/>
				<apex:outputField value="{!Opportunity.FieldName}"/>
				<apex:outputField value="{!Opportunity.FieldName}"/>
                            </apex:pageblockSection>                
                        </apex:pageBlock>
                </apex:tab>        
                <apex:tab label="Deal Info" id="dealinfo">                    
                            <apex:pageBlock >
                                <apex:pageBlockButtons location="Top">
                                <apex:commandButton value="Save" action="{!save}" id="save" style="display: none;" />
                                <apex:commandButton value="Cancel" action="{!cancel}" id="cancel" style="display: none;"/>                 
                                </apex:pageBlockButtons>
                            <apex:inlineEditSupport showOnEdit="save, cancel"/>
                            <apex:pageblockSection >                                
                          	<apex:outputField value="{!Opportunity.FieldName}"/>
				<apex:outputField value="{!Opportunity.FieldName}"/>
				<apex:outputField value="{!Opportunity.FieldName}"/>
                            </apex:pageBlockSection>
                        </apex:pageBlock>
                </apex:tab>
	</apex:tabPanel>

 
sravusravu

Have you kept you code between <body> </body> tags ?

 

For example,

 

<body>

           <apex:form>

 

          </apex:form>

</body>

 

we are defining the style for body, that is the reason you need to put your code between <body> and </body>
cazpico OGIS-RIcazpico OGIS-RI

Hi!

 

body{  ==>> .bodyDiv{

 

Try it!