Background stops before the bottom of the div

Question

I have an issue with the background of my banner where the background stops before the bottom of the div. As a results there is a big white space at the bottom.

This is a responsive website and the issue only happens after the screen size goes below 1250px (just resize your browser and you will see it).

I have tried tweaking the HTML/CSS in using firebug as much as I could (adding clearfixes ect) but nothing I tried had any results.

This is how it looks at full size, and how it should look:

This is how it looks when under 1250px with the unwanted space under it:

This is the website.

Answer 1

Your background image height is short, you need to modify your .slider1 class as

.slider1 {
   background: url("../images/banner-background-01.jpg") repeat-x scroll center 100% transparent;
   /* Rest of the styles goes here */
}

Also, as you commented, you can also try using background-size property with the y parameter that means the vertical size set to 100%

Answer 2

Try removing the repeat-x from the background property for .slider1. That should cause the background image to repeat in both x and y which is the default.

Answer 3

It would be more helpful if you had posted some code as well, but probably the quickest way to solve your issue would be to add the following CSS:

.slider1 {
     background-size: 100% 100%;
}