Background getting pushed down by top margin

Hey,

I’ve created a website for my girlfriend, but i cannot for the life of me figure out why I can’t get the background images to stretch to 100%? It looks just as bad on mobile, if not more so as the content overlaps with the footer

Here is the link: http://lopa-dance-v3.webflow.io/about
Here is the share link: https://preview.webflow.com/preview/lopa-dance-v3?preview=8bf780a754dc47e84533d8d0f956423b
(Delete the ‘Blackout’ symbol to see everything behind the blackness - I put this in there to give a fade in effect)

As you can see, the background image stops, then theres a background colour underneath (that I made yellow to see better), then all the content merges with the footer, this happens throughout the site with the exception of the homepage which was built with a slider.

Would anyone be able to provide some insight as to why this is happening?
A suggestion was to change the Body to 100% - unfortunately that didn’t work :frowning:

You’ve got a top margin of 40px on your footer and since the header is butting up against the footer, it’s forcing that separation.

Ah thank you!

I think that’s solved the separation issue where you could see the background through it. Any ideas for the other bit? :sweat_smile:

If you go to the ‘About’ page, content is spreading into the footer and the background doesn’t extend all the way down. If you switch to tablet or phone view and go to any page then it just looks even worse and the ‘Classes’ page content is skewing the footer completely :sob:

You literally can’t even submit the form on the contact page as the footer logo is in the way


EDIT

I think I’ve managed to fix everything

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