CSS Image not showing in visualforcepage?

Question

Below attached my css code ..

body { 
background-image:url('{!$Resource.background}');
 }  
.details{
margin:0px 0px 90px 350px;
padding:30px 0px 20px 0px;
width:300px;
height:400px;
border:1px solid;
border-radius:5px;
}
.input{
width:250px;
height:25px;
border-radius:3px;
padding : 0px 0px 0px 0px;
}
.error{
text-align:left;
color:red;
margin:0px 70px 0px 25px;
}

using this css code created one static resource that static resource i am calling in visualforce page

<apex:page controller="register" showHeader="false" standardStylesheets="false">

<apex:form id="form" >
<br/><br/><br/><br/>
<div class="details" align="center" >
<div class="firstname">
<apex:image value="{!$Resource.firstname}" width="20" height="15"  style="margin-top:0px;"/></div>
<div class="group">
<span style="color: red;font-size: 14px;"  >
<apex:inputtext value="{!firstname}" id="fn" html-placeholder="Firstname" styleclass="input"/></span>
<div id="err1" class="error"></div></div>
<div class="lastname">
<apex:image value="{!$Resource.lastname}" width="20" height="15"  style="margin-top:0px;"/></div>
<div class="group">
<span style="color: red;font-size: 14px;"  >
<apex:inputtext value="{!lastname}" id="ln" html-placeholder="Lastname" styleclass="input"/></span>
<div id="err2" class="error"></div></div>
<div class="password">
<apex:image value="{!$Resource.password}" width="20" height="15"  style="margin-top:0px;"/></div>
<div class="group">
<span style="color: red;font-size: 14px;"  >
<apex:inputsecret value="{!password}" id="pw" html-placeholder="Password" styleclass="input" /></span>
<div id="err3" class="error"></div></div>
<div class="username">
<apex:image value="{!$Resource.username}" width="30" height="20"  style="margin-top:0px;"/></div>
<div class="group">
<span style="color: red;font-size: 14px;"  >
<apex:inputtext value="{!username}" id="un" html-placeholder="Username" styleclass="input" /></span>
<div id="err4" class="error"></div></div>
<div align="left" style="margin-left:20px;">
<apex:image value="{!$Resource.dateofbirth}" width="30" height="20"  style="margin-top:0px;"/>
</div>
<span style="color: red;font-size: 14px;">
<apex:actionRegion >
<apex:inputtext value="{!dat}" id="db" html-placeholder="dd/mm/yyyy" styleclass="input">
<apex:actionSupport event="onblur" reRender="ag" action="{!find}"/>
</apex:inputtext>
 </apex:actionRegion>
</span>
<div id="err5" class="error"></div>
<div align="left" style="margin-left:20px;">
<apex:image value="{!$Resource.Age}" width="30" height="25"  style="margin-top:0px;margin-left:0px;"/></div>
<span style="color: red;font-size: 14px;"  >
<apex:inputtext value="{!age}" id="ag" html-placeholder="Age" styleclass="input" /></span><br/>
<apex:commandbutton action="{!post}" value="submit" onclick="valdation()" id="demo" onmouseover="tooltip.pop(this, 'Lorem ipsum dolor...mauris')" reRender="error" styleclass="input" style="background:blue; color:white;"/>
</apex:form>
</apex:page>

all css styles working in page but background image not displaying please help me why image not displaying in page

hi i did same way what you exaplained but i am not getting image in page

Can you post your vf page code?

Saroj Bera
– Saroj Bera

2017-02-06 11:25:04 +00:00
Commented Feb 6, 2017 at 11:25 — Saroj Bera
– Saroj Bera, Commented Feb 6, 2017 at 11:25
See my updated answer.

Saroj Bera
– Saroj Bera

2017-02-06 11:55:25 +00:00
Commented Feb 6, 2017 at 11:55 — Saroj Bera
– Saroj Bera, Commented Feb 6, 2017 at 11:55

Saroj Bera · Accepted Answer · 2017-02-06 11:54:56Z

As CSS file is a static resource, this expression {!$Resource.background} will not work. You have to zip your css and images in a single zip and use <apex:stylesheet value="{!URLFOR($Resource.ZipFile, 'CssExample.css')}"/> to refer the css file. Then in the CSS file refer images as background-image: url("images/background.gif"). Images will be the images folder inside zip file.

VF Page

<apex:page showHeader="false" standardStylesheets="false">
    <apex:stylesheet value="{!URLFOR($Resource.ZipFile, 'CssExample.css')}"/>
    ..............
    ..............
</apex:page>

CSS File CssExample.css

body {
    background-image: url("images/paper.gif");
    background-color: #cccccc;
}

Your zip file content should follow this structure.

Update

If you want to use <apex:image inside page then use the following syntax.

<apex:image url="{!URLFOR($Resource.ZipFile,'images/Bluehills.jpg')}" width="50" height="50"/>

Stack Exchange Network

CSS Image not showing in visualforcepage?

1 Answer 1

You must log in to answer this question.

Hot Network Questions

CSS Image not showing in visualforcepage?

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions