Extra Space Below Background image while resizing

Where is the rest of the markup and css? Have you got a link, or can you make a minimal test case?

Why haven't you scaled the image prior to serving? Scaling a large image uses a lot of computing power (hard on batteries) and sucks up the user's bandwidth.

Why declare a height on .intro? That's probably what is making the excess white space.

Why the fixed background-attachment?

If you insist on using bootstrap, you will end up with a lot of code bloat, both html and css, making maintenance and edits a royal pain.

cheers,

gary

Okay first things first, here's a Link to my website.
The image is like 85kb with dimensions of 1922x722px.
If i dont declare height in pxs or in % the image wont display. The same happens with max-height.
The fixed background-attachment was because i was using stellar.js but now i am using skrollr.js (parallax) that does not require fixed backgrounds.
I am using bootstrap because it helps me to achieve a responsive design.
Any help appreciated!

//mod edit: Link fixed. Don't forget the protocol prefix. ~g

Thanks for the link, it makes it much easier to understand what you're aiming at.

The reason you need the height property is that you have no content in the banner. Make the image a foreground object and your issues go away. The image will self-adjust its size if you set its width to a percentage value. The container will be the height of its content.

You don't do your visitors any favors by having such a large image in the first place. It slows downloading, uses memory and for folks paying for data by the byte, is expensive.

Using {position: fixed;} or {background-attachment: fixed} is cpu intensive and that means batteries die sooner. There is seldom any compelling reason to fix an element. People know what the scroll bar does; it's one of the first two things people learn about along with the back button.

The use of web fonts, lacking any compelling reason, is user unfriendly. The 'roboto' Google font is too close to Tahoma, a web safe font that's already in the browser, to bother with another download and the absolutely silly stylesheet that supports it. Set your font stack to {font-family: tahoma, verdana, segoe, sans-serif;} wherever you now use roboto.

Now, to bootstrap: A stylesheet that's 115kB?!? Minified? What a steaming pile. Για χάρη των θεών get rid of it. It does not aid in making your site responsive; it only makes it a bloated mess.

If you don't use html5 elements (and there's no reason here that I see), you don't need the shim scripts for IE.

cheers,

gary

Thanks for your answers and suggestions. Can you please tell me how i make the picture foreground? I mean now i am using skrollr.js to have a parallax picture but i cant use skrollr.js with an tag. As i said before the image is only like 85kb i dont think that will be a problem (in my opininion). Thanks again.

I don't see that your banner image is doing anything that's the least bit interesting, so what is the js for? Besides sucking the life from batteries?

<section class="intro" data-stellar-background-ratio="0.5">
  <img src="/img/banner-bg.jpg">
</section>
 
.intro {}
 
.intro img {
    width: 100%;}

Compared to the bloated size of the page, it seems trivial. Folks paying data rates or having data caps on their service may feel differently.

cheers,

gary

Thanks gary.
The page you see is still under development. What do you reccomend me? Remove completely bootstrap? How i will be using containers or collumns or buttons that are built inside? I like how my elements stack on smaller devices and as i am a beginner am afraid that without bootstrap i wont be able to control my development.

put the margin: auto; css to your banner image,then you dont need to add the extra css because already your image width size are too big untill width 1980px your image come up with good quality