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.
Nice job...appreciate sharing your knowledge and time with SDN.
keep up the good work.
Thanks
Krishna
Very Useful Doc
Thnx for sharing.. Keep posting more like this...
Cheers 😉
Pradyp
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
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/
Hi Abhishek,
Very useful doc..... 🙂
Regards,
Mithun K
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 ..
great. 🙂
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
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.
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