How to get image in footer to appear/float above page content

Support
#1

I am wondering if it is possible to get an image in the footer, such as a background image or image element, to rise/float above the page content, such as in this example:

I can’t seem to achieve this using negative margin on the bottom of the page section or the top of the footer bar.

Hopefully I have explained this well enough… thanks in advance!

#2

Hey @daneruef,

With Pro and an Image element in the Footer Bar, it is possible. I got it working on my test page built using the Content Builder. In the screenshot below, the paragraph text is from the content and the image is in the footer.

Here’s the setup to achieve that.

  • Add an Image element to the Bar.

  • The key to the Text from the Content overlaying the Image from the Footer is setting the Footer Bar’s Z-index to 0.

  • Regarding the Image element, the Retina option should be disabled if you’re not planning on supporting Retina screens. The Top Margin then is set to a negative value.

The described setup might not work for some areas though so you need to tweak the z-index of other areas. For instance, I view a post and the footer covers the Comment Form.

That can be remedied by assigning a z-index of 1 to the content’s container which has the class of x-main. The CSS goes like this.

.x-main {
    z-index: 1;
}

==============================================================================

Since this is method relies on z-index, and this might be the case if you use the builder in general, you might want to opt with using a simple CSS background to prevent complexity. Please show us your exact design so we could advise accordingly.

Please just note that we will not be able to do major coding work as that service is not included as part of our product support. We’ll just see if it can be achieved with simple code we can show you as a guide to help you get started.

Thanks.

#3

Hi Christian,

That worked! Only thing is now I have two scroll bars on the right…

Also, this image is intended to be a background image, but I can’t figure out how to put the menu, text, logo, etc., on top of this image…

I’ll send the temp link in a private note so you can see the build site.

Thanks so much for your help!

#4

Hello @daneruef,

To get rid of the second scroll bar, please update your custom css:

body, input, button, select, textarea {
    font-family: "Montserrat",sans-serif;
    overflow: hidden;
}

I have edited your navbar in my browser and it is actually on top of the image.

It does not seem to be on top because the background color of the bar is almost the same as the background color in the section. Please try to darken or change the background color of the bar so have a slightly different as you scroll over the section.

Hope this helps.

#5

Hello,

Thanks for the reply - that CSS did get rid of the second scroll bar - thanks!

I should have clarified, what I am trying to do is put another inline nav and copyright text and logo in the footer itself, so the image element that is floating above the page content is in the background of these footer elements I want to add, just like in the image example I provided in the original post.

I hope this makes sense…

#6

Hey @daneruef,

Please edit your footer and add a bar that will contain your navigation inline, copyright text and the logo. The z-index of this bar should be much higher than the z-index of the bar which has the curve image so that it will be behind and will act as a background.

Hope this helps.

#7

Excellent - took a little tinkering but that did indeed work!

Thanks very much for your help.

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.