Custom Footer with Image

Not sure about how to decrease or remove the white background but I have been successful using a custom created image and if you have access to a server, you can also use an iFrame to load an image.

@lrnlab I got so far with it using the following CSS:

/**code for footer**/

div.doc-layout-common-footer {

  height: 100px;

  background-image:

  url(https://XXXXX);

  background-position: center;

  background-repeat: no-repeat, repeat;

  opacity: 0.6;

}

Ill have to play around with image sizing and position I think :)

Sam 

yes it’s a lot of trial an error when it comes to configuring these areas...especially seeing as you don't to this type work often...

I’m curious about your usecase here, seems like jumping to CSS when there might be some built in options for you first.

You say footer, are you using the actual footer at all in your platform? If so is it just trying to be different on this page? Are you actually adding a visual image below? Could you instead just add a row with 1 image widget as the bottom?

If you are using the CSS to essentially hide the footer entirely, why do you need the image at all? Just do a display:none; in the class you had above?

@Bfarkas the team dont want a widget (I did suggest this)  they want to utilize the white space in the footer (Docebo support also said I would have to utilize ccs for this too) ultimately they would like a large image across the bottom with a multi brand graphic in it.  im just trying to find out what sizing may work best

Thanks

Sam 

I hear you, but based on your screenshot, you don’t actually have a footer defined, you can add an image directly to that setting instead of injecting via CSS or using a widget, and then at most use the CSS to remove any buffer space. See here, the gradient box is coming in via the system settings area for the footer:

System area:

Some advantages of this:

• You can change the image based on language selection (not sure if relevant to you or not)
• You can add proper alt text to the image instead of adding as a background.
• You can link the image to a URL if you wanted.
• It’s more accessible to your users.
• It works on mobile where CSS methods will not.

I added a much smaller amount of CSS:

.doc-layout-common-footer {
    padding: 0 !important;
}

and it brings that footer image flush:

except this degrades nicer for non-supported custom CSS usage.

@Bfarkas Thank you ill take a look :)

@Bfarkas how do I stop the image from adding white space when I zoom? eg sized to 70%

ive tried adding width etc but nothing working

Thanks!!!

@Bfarkas Hey there - have you had any success putting HTML into the footer area under White Label? Trying to build a fully custom footer