function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

imbeding a background image in a login page

I want a login page for a customer portal that uses an image for the background.


I tried various approaches.

I first did the following:

  • Saved my image in Documents
  • Created and html file and saved it in Documents
  • Went to Customize > Customer Portal > Settings > Portal Name> Edit > Under the section "Look and Feel", in the Login Message, I  uploaded the html file

The problem I am encountering is that the css/html code for the background image gets striped away on the portal login page. It does show up when I view it inside the portal. I tried posting the code in the html file and in the css file, but it’s gone once it hits the browser.

My html file:


<apex:stylesheet value="{/Resources.ForteStyles.css}" />

<apex:form id="loginForm" forceSSL="true">

<div style ="background-image: url(;

background-repeat:no-repeat; height:500px;padding:120px 80px 80px 80px;" >

<div id="loginBackground">

<h3>Welcome to Forte Customer Portal.</h3>

<form action="" onsubmit="return login()" id="loginform" method="post">

 <p id="notification"></p>

<!-- TEXTBOXES -->

<label>User name</label><br />

<input name="username" type="text" class="text large required" id="username" /><br />

<div class="clearfix">&nbsp;</div>

<label>Password</label><br />

<input name="password" type="password" class="text large required" id="password" /><br />

<div class="clearfix">&nbsp;</div>

<p><input name="btnLogin" type="submit" class="submit" id="btnLogin" value="LOGIN" /></p>





I also tried defining it in my css file and that wasn't successful either:

#loginBackground ( background-image: url(;

background-repeat:no-repeat; height:500px;padding:120px 80px 80px 80px;



And in my html file:

<div id="loginBackground">



Any ideas would be welcome.




Try uploading ur images in Static Resources and make cache control as public.


check this links to access images in visualforce pages.


My image is in Static Resources and the cache control as public.


When I view source I see that my declaration of my CSS file is gone as well as most of my code.


Also it looks like the code of my page is added to an existing login page.


I am searching for that page but cannot find it. Is there an SF login module someplace?


did u provide your visualforce page access to the portal/public site access?


Thank you Chiranjeevi,


How do I do that?


It's an HTML file that was loaded: Customize > Customer Portal > Settings > Portal Name> Edit > Under the section "Look and Feel", in the Login Message, I  uploaded the HTML file


I know that the login screens sees my file because when I view source I see some of my code, the majority of it has been stripped away.


I think there is a default login page created by Salesforce, but I don't know how to find it or how to replace it.


After many failures I realize that: JavaScript and CSS code are automatically removed from HTML files used as the portal login message.

I can add an image to the login page but not specify it as a background image.


Does anyone know where the built-in login page is in customer portal, and if there is any way to over-ride it with my own page?


Thank you in advance,