I have a css gap I'm trying to get rid of [closed]

Question

This is my site

If you scroll to the bottom, you will notice that there is a big gap between the bottom of the content and the blue footer. The bird is supposed to be behind the content, but it still needs to be attached to the footer so that when the accordion expands, the bird expands with it. Did that make sense? I tried adding a negative margin, but that made the accordion act up.

Answer 1

This is happening because you have the bird in a separate <div> from the content. If you want the bird to be behind the content, you need nest the accordion inside a <div> with the bird background applied to it. Here's what you need to do...

Instead of this

<div class="wrapper">
...
</div>
<div id="bottom-graphic-container"></div>

Do this

<div id="bottom-graphic-container">
    <div class="wrapper">
    ...
    </div>
</div>

And then you also need to remove the height:...; property of your bottom-graphic-container style.

#bottom-graphic-container {
    margin:0;
    padding:0;
    background:#fff url(../images/bg-bottom.jpg) bottom left no-repeat;
}

I tested this on my PC and it works.