Skip to Content

This is very simple to do. When I needed to do this, I searched scn and found some solutions but all where in terms of Javascript and other things..

I started thinking about the simple solution with my basic HTML knowledge. I am happy that I found a very simple way to do this and would like to share.

Step1) If you are new to logon page customisation, you can refer the below given link which explains the steps nicely:

Now you know how to customise logon page and run the project on server from step1. So, the next task is to put a background image for logon page.

Step2) put the image that you want as background in the layout folder. In my case the image name is bg3.jpg. better in the resolution is good (around 1350X600)

Step3) You need to change the logonPage.jsp for this, below is simple html (shown in bold) that I added to logonPage.jsp:

<%@ include file=”/mobile/logonPageMobile.jsp” %>

<% } %>

<% if (!otherUiLoaded) {%>


    background = “<%=webpath%>layout/bg3.jpg” style=padding:5px;width:1350px;height:500px;border:1px;background-repeat:no-repeat;>

   </body> </html>

<table id=”tblFrmUI” width=”150px” valign=”middle” dir=”ltr” align=”<%=uiFrameAllign%>” cellPadding=”0″ cellSpacing=”0″ style=”background-color:#FFFFFF; <%=uiFrameTopMargin%>”>

  <% if(uiFrameVisible){ %>

Step4) Save and run the project as you did in step1.

This would set the image bg3.jpg as background image in logon page.


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Former Member

    Hi abhishek,

    Thanks for this wonderful document. I tried it and it worked, however my background pic is left aligned. Would you know how to center the pic?


    1. Former Member Post author

      Hi Wes,

      I guess the resolution of the pic doesn’t match the screen resolution. Please try with the same resolution pic. If still there is any problem then I think you can add the background-position : Center in the html.

      as shown below:


          background = “<%=webpath%>layout/bg3.jpg” style=padding:5px;width:1350px;height:500px;border:1px;background-repeat:no-repeat:background-position : Center;>

         </body> </html>

      I haven’t tried this,please let us know the result once you try.


  2. Former Member

    Hi Abishek,

         Thanks for the walk through, it was a huge help. How did you re-size the logon window? I would like to modify mine to reflect the same size you have made yours.




Leave a Reply