How to edit the background of the login page instead of color to place an image?

Q&A
1

hello, we have tried to modify the background login page from color to an image , however we can not, we are working on files skin.config.less and loginPage.less, modify the variables but simply do not, could help to learn how to apply , thanks (Version 6.5)

2

This trick does NOT work in STUDIO, only in a production style Portal Bundle. STUDIO rebuilds its CSS and directory structures every time you run a process which means a lot of work to get it working right.

The following taken from https://css-tricks.com/perfect-full-page-background-image/

I only tried this using Google Chrome debugger so have not finalized which HTML to change, but it works…and could be used for every page if required

Here I’m using 6.5.0, should work in everything up to 7, 7 will need to be tested separately.

Shutdown Portal

In ???\BonitaBPMCommunity-6.5.0-Tomcat-7.0.55\bonita\client\tenants\1\work\theme\portal add the following code to bonita.css

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; 
		/* Set up proportionate scaling */
		width: 100%;
		height: auto;
		
		/* Set up positioning */
		position: fixed;
		top: 0;
		left: 0;
	}
	
	@media screen and (max-width: 1024px){
		img.bg {
			left: 50%;
			margin-left: -512px; }
	}
	
	#page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
	p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }

Add your image to ???\BonitaBPMCommunity-6.5.0-Tomcat-7.0.55\webapps\bonita\images — mine was a 1024*683 jpg

restart Portal

Open Chrome to http://localhost:8080/ or whatever your server and port are defined as…

Login Screen is displayed
Press the F12 Key → Click on Elements then right click < html > → Select Edit as HTML
Scroll down to the < body > tag
immediately after add

in my case

Click the page to force and voila! It’s done…

As I say I’ve not worked out which HTML is used for the login page to fix the image, maybe later, or if someone else does that before me…

But this shows how it can be done…

regards
Seán

3

when you say colour you mean the red bar across the top of the page, and instead of this you want to display a company image, or do you mean the Login-image, or do you mean the white background?

can you maybe draft something that shows what you want and then post it here?

4

Thanks Sean, I mean to put an image on the entire background of the page, not the red bar, (the background image property) attached link to view an example of what is desired…
background image

5

OK got it (but couldn’t find a link)