Extra Space Below Background Image

[pantapanta1]

I have a background image 1780px x 700px and i am using bootstrap 3. When i am on high resolutions the image is displaying just fine. However, when i try to resize the browser an extra white space is created and messes up my design. I have set the display:block property but it does not change anything. Here’s a pic:

http://s29.postimg.org/9z0k9hkjb/bac.jpg

Some code:
.intro {
background-image: url(/img/banner-bg.jpg);
background-repeat: no-repeat;
height: 80%;
background-attachment: fixed;
background-position: center center;
background-size: contain;

[pantapanta1]

Yes sure! Here’s a link: http://bit.ly/1FmRqmB
Make sure you resize the browser to see the problem!

[pantapanta1]

Unfortunately even after deleting those media queries the space below the picture stays the same. The problem is that while the background picture is set with the background-size: contain the height of the intro div stays the same. I cannot use background-size: cover because it distorts and crops my picture. :(

[Author]

Posts