How can I customize the service portal login page with two different images in two different containers?

[lfaucher]

 I added an image in each container but it doesn't show correctly when previewing it.  I'm attaching an image on the edit page and the preview page.  I can't get the bottom image to display to the bottom of the page.

On Container 1 (top), the width is fixed and the background style is "Cover."  Only part of the image is showing in preview mode.

On Container 2, width is fixed and the background style is "Cover."  How can I have it expand the rest of the page?  Do I have to keep adding containers with the same image??

I have tried some css options based off what I have read on the forums but still can't get it to work.  Any guidance is appreciated.

[Siddhant]

Hey @lfaucher 

Here are some suggestions!

• Add the background image to the page itself. Refer the screen shot below -

               

• If you want different background images for individual containers then try changing the height of the containers such that whole image is displayed as per your needs. You can add a css class to the container and define it in the page css field as shown above.
• And remember one thing, adding a container does not always mean that it would occupy the space on the page unless you add a widget to the container. So keep this in mind, adding a widget to the container will make sure that the container takes space on the page.

Hope you find any one of this correct & helpful!

Otherwise feel free to ask any further question.

Thank you.

[lfaucher]

Thank you for replying.  I tried that code above and nothing changed.  Not sure what else to try

[Siddhant]

Can you please let me know exactly what you are trying to achieve?

[lfaucher]

Sure, if you look at the edit image attached above (serviceportaleditmode.jpg), that is what I want it to look like.  I have a background image in container 1 and a different image in container 2 & 3 but can't get it to look like the edit page.  Hope that makes sense.