Keep text moving with browser issue

Question

I'm having trouble with the text below the image.

For some reason it's situated too far away from the image, I'd like it to stay 30px from the bottom of the picture at all times. However, when I make my browser smaller it simply pushes the text down.

I've put my CSS in this JSFiddle.

Hopefully one of you kind people can point my noobiness error out.

Thanks

Michael

UPDATE:

Solved the issue with the following:

<script type="text/javascript">
        // The social div 
    var $socialDiv;
    
    $(document).ready(function() {
        $socialDiv = $('.social');
    });
    
    $(window).scroll(function() { 
        //Get scroll position of window 
        var windowScroll = $(this).scrollTop(); 
        
        $socialDiv.css({
            'opacity' : 1 - windowScroll / 400,
            'background-position-y' : -windowScroll / 10
        });
    });
</script>

Then added a margin bottom to the div.

<div class="social" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-repeat: no-repeat no-repeat; overlow: hidden">
</div>

Answer 1

Note: The OP eventually explained that he wanted to achieve this http://fearthegrizzly.com/ effect.

Why the large gap?

There are multiple reasons (<br> tags added to paddings upon margins above your .project_content div), but one of them is the background in the .social div resizing with the browser, while the height of the div stays the same. This leaves a huge whitespace below the background that is the remainder of the div. This is caused by the css-rule background-size: 100% auto (defined in your javascript on social div).

Let's rewrite a bit of CSS to see if we can't fix this, shall we?

What should happen?

The background of the div should stay the same height. To avoid a gap forming, it is wise to have the div also stay at the same height, being that of the background image: 320px. The background should stay in the horizontal center of the div, but also at the top. Then, it needs to be fixed to make sure your fade-on-scroll function keeps working.

You also mentioned something about wanting 30px of spacing beneath the .social div. All you will need for this is a margin-bottom: 30px. The blank rules and top padding of the .project_content div are unnecessary.

Implementation

So we get this piece of CSS:

div.social {
  width: 100%;
  height: 320px;
  margin-bottom: 30px;
  background: white url('image.jpg') repeat-x center top fixed;
  }

In a fork of your jsFiddle, you can see this in action. Please note that I have not been able to remove any spacing at the top of .project_content.

I hope all is clear. If you have any follow-up, don't hesitate.

Answer 2

Why the div height does not resize

In a piece of Javascript describing the social div, you define socialDivHeight = 560. This causes the div in which the image is situated to have a solid size, and therefore it will not shrink when the browser width is made smaller.

The Javascript in question is this one (truncated):

<script type="text/javascript">
  // The social div 
  var $socialDiv,
  // The social div's height 
  socialDivHeight = 560,
  currentSocialDivHeight = socialDivHeight;

  (..)

  // Then, later, you define a css rule from the set height of 560.
  'height' : socialDivHeight + 'px'
</script>

If you do not define that height, the div should automatically resize with the browser width.

How can we solve this?

The problem here is that the image is set as the background of the #social div. It will simply be cut off at whatever size the div decides to be for the content. You did specify a height, which makes sure that at least the whole background image is shown, but this also means that the div will never resize with the browser width.

You will need to have an actual <img> inside your div.

<div class="social">
   <img src="image.jpg">
</div>

Making sure that both the div and the image have a width of 100% (the full width of the browser), the image will resize with the browser, and the height of the div will adept to that of the image, and thus, push the other content below the div down. You can also use a margin-bottom: 30px; on the div if you want that 30 pixels of spacing to happen, in stead of two <br> tags of 15 pixels height.

div.social {
  width: 100%;
  margin-bottom: 30px;
}

img {
  width: 100%;
}

I have created a very simplified fiddle that hopefully explains what all this amounts to in HTML and CSS: http://jsfiddle.net/kMnQ2/

Answer 3

There's a style in your HTML containing the image:

<div class="social" style="background-image: url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg); background-attachment: fixed; background-size: 100%; height: 560px; width: 100%; background-repeat: no-repeat no-repeat; "></div>

It has height set to 560px so you image will take so much vertical space no matter how big (or small) it really is.

Here's your Javascript that formats the picture:

var $socialDiv,
        // The social div's height 
        socialDivHeight = 560,
        currentSocialDivHeight = socialDivHeight;
        var socalDivWidth = 100;
    $(document).ready(function() {
        $socialDiv = $('.social');
        $socialDiv.css({
            'background-image': 'url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg)',
            'background-repeat': 'no-repeat',
            'background-attachment': 'fixed',
            'background-size' : '100% auto',
            'height' : socialDivHeight + 'px',
            'width' : socalDivWidth + '%'
            });

You should change your socialDivHeight value or change the logic behind setting your image's height to socialDivHeight + 'px'