Skip to Content
Author's profile photo Former Member

Set background Image for Portal Logon Page.

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:

http://scn.sap.com/docs/DOC-27909

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) {%>

<html><body

    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.

/wp-content/uploads/2013/11/bg_logon_screen_314393.png

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Nice job...appreciate sharing your knowledge and time with SDN.

      keep up the good work.

      Thanks

      Krishna

      Author's profile photo Former Member
      Former Member

      Very Useful Doc

      Thnx for sharing.. Keep posting more like this...

      Cheers 😉

      Pradyp

      Author's profile photo Former Member
      Former Member

      hi abhishek ,

      tq very much i will try with my pic once how it luks and if possible can i know how to add flashing for that background image

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Jwala,

      You can create a gif file from the images that you want to display. And then in above code use that gif file in place of jpg file.

      Refer the below link to create an animated gif file in adobe photoshop CS.

      http://www.briandalessandro.com/blog/create-an-animated-gif-in-photoshop-cs5/

      Author's profile photo Former Member
      Former Member

      Hi Abhishek,

      Very useful doc..... 🙂

      Regards,

      Mithun K

      Author's profile photo Former Member
      Former Member

      Hi Abhishek kumar

      Thanks a lot, I followed your document and implemented the same for one of our clients with the help of my Portal Consultant.

      Cheers .... Love this document .. /wp-content/uploads/2014/01/asd_375242.png

      Portal Login Page.gif

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      great. 🙂

      Author's profile photo Former Member
      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?

      Wes

      Author's profile photo Former Member
      Former Member
      Blog 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:

      <html><body

          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.

      Abhishek.

      Author's profile photo Jeremy Ridge
      Jeremy Ridge

      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.

      Regards,

      Jeremy