Changing the footer image

(0) Share

Report

Posted on by Community Power Pla...

Hi,

I'm looking to customize the footer on my web pages in my portal from the default to this image attached, if any one can advise me on this it would be greatly appreciated.

Many thanks

Nathan

3C Long banner co...

All responses (1)

Answers (0)

justinburch Microsoft Employee on at

Like (1)

Report
Re: Changing the footer image

It depends on how you want it to look - this image will stretch and grow with screen size, but you can do this by adding a CSS Web File as a child of Home and referencing the CSS. You will need to make additional changes based on the current styling of your footer.
If you want it to fill the entire footer, then at a high level, this is what you can do (note that I've uploaded the image as 'footer.png' as a Web File):

footer { background: url(/footer.png); background-repeat: no-repeat; background-size: cover; }

You'll then need to do this if your Portal has both top and bottom footer, but actual implementation will be based on current design:

footer div.footer-top, footer div.footer-bottom { background-color: transparent; }

Your goal is to remove any color that would cover the background image. Lastly, you'll probably need to play with sizing depending on how you want it to look.

If you don't need it to fill (looks better), then you can change cover to contain in the aforementioned CSS and use background-position-x: left/right/center to have it moved where you'd like.