Background image for div not touching the bottom of the page

Question

I'll try to explain this the best that I can. I'm working on a website right now and I want a background image of one of my divs to fall behind the footer.

I've got it working when the image has a height of 450px but when I try to change it to 350px there is white space between it and the footer. As if there is 100px of space between it and the bottom of the page now.

In Chrome it looks fine no matter the size, but all other browsers it creates white space.

Here is my current HTML and CSS for the footer div and the div that is not working properly.

<div class="testimonials">
    <div class="col-md-8 text-center">
        <?php dynamic_sidebar( 'testimonial-widget' ); ?>
    </div>
    <div class="col-md-4">
    </div>
</div>

<footer class="navbar-bottom">
    <div class="row">
        <div class="col-md-12 text-center">
        <p class="footer-content">Some content...</p>

        <p class="footer-content-mobile">Some content...</p>
        </div>
    </div>

    <img src="/wp-content/themes/tct/inc/assets/footer.png" />
</footer>


.testimonials {
     background-image: url('/wp-content/themes/tct/inc/assets/mug.jpg');
     background-size: cover;
     background-position: 100% 70%;
     background-repeat: no-repeat;
     height: 350px;
     margin-bottom: -300px;
     font-size: 24px;

}

footer {
     word-wrap: normal;
     position: absolute;
     bottom: 0;
     width: 100%;
}

footer a {
     color: #ffffff;
}

footer a:visited {
     color: inherit;
}

footer a:hover {
     color: #404040;
}

@media (min-width: 981px) {
     footer img {
         height: 300px;
         width: 100%;
         top: -9999px;  
         z-index: 10;
     }

     .footer-content-mobile {
         display: none;
     }
}

.footer-content {
     color: #ffffff;
     position: absolute;
     left: 0;
     right: 0;
     top: 250px;
     margin: 0 auto;
     font-size: 20px;
     padding-bottom: 10px;
}

.bullet {
     margin-left: 20px;
     margin-right: 20px;
}

And lastly, here are screenshot of how it's supposed to look (it looks fine in Chrome) and how it's not supposed to look (how it looks in all other browsers).

Correct:

Incorrect:

Hopefully I explained everything enough so you understand my problem. Let me know if I need to provide any additional information.

Links to the images that I am using: Mug: http://i60.tinypic.com/f4g3t3.jpg Footer: http://i59.tinypic.com/xfq6x5.png

Answer 1

Try to wrap all this into another container and set explicit height to it and position: relative

.wrapper {
    height: 370px;
    position: relative;
    overflow: hidden;
}
.testimonials {
     background-image: url('http://oi60.tinypic.com/f4g3t3.jpg');
     background-size: cover;
     background-position: 100% 70%;
     background-repeat: no-repeat;
     height: 350px;
     margin-bottom: -300px;
     font-size: 24px;

}

footer {
     word-wrap: normal;
     position: absolute;
     bottom: 0;
     width: 100%;
}

footer a {
     color: #ffffff;
}

footer a:visited {
     color: inherit;
}

footer a:hover {
     color: #404040;
}

@media (min-width: 981px) {
     footer img {
         height: 300px;
         width: 100%;
         top: -9999px;  
         z-index: 10;
     }

     .footer-content-mobile {
         display: none;
     }
}

.footer-content {
     color: #ffffff;
     position: absolute;
     left: 0;
     right: 0;
     top: 250px;
     margin: 0 auto;
     font-size: 20px;
     padding-bottom: 10px;
}

.bullet {
     margin-left: 20px;
     margin-right: 20px;
}

<div class="wrapper">
<div class="testimonials">
    <div class="col-md-8 text-center">
        <?php dynamic_sidebar( 'testimonial-widget' ); ?>
    </div>
    <div class="col-md-4">
    </div>
</div>

<footer class="navbar-bottom">
    <div class="row">
        <div class="col-md-12 text-center">
        <p class="footer-content">Some content...</p>

        <p class="footer-content-mobile">Some content...</p>
        </div>
    </div>

    <img src="http://oi59.tinypic.com/xfq6x5.jpg" />
</footer>
</div>

Answer 2

increase value of height

.testimonials {
background-image: url('http://i60.tinypic.com/f4g3t3.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 560px;      //in my case
margin-bottom: -300px;
font-size: 24px;
}

or try it

footer {
word-wrap: normal;
text-align: center;
position: absolute;
bottom: 110px;
width: 100%;
}

Answer 3

I managed to find a solution that works for me for now. I'm sure it's not the way to go but it did help.

I added a negative margin-bottom of 100px to my content wrapper and that seemed to do the trick. However, that then screws up Chrome and Safari because they were rendering it properly before. So I used a conditional comment to set the bottom-margin to 0 in Chrome and Safari.

Other answers are of course welcome though!