header containers expand/contract with images

StackOverflow https://stackoverflow.com/questions/16258862

Question

I've been trying to tackle this for awhile and been ignoring it but now I gotta get it fixed. See, when the window is resized, whether larger or smaller, I want teh header area to proportionately change sizes with header image so it looks clean on all resolutions above 1024. I had this working in the initial version, but if I adapt the code, my content will be behind the header area. Even now when you resize, and then go full screeen, the content is behind the header! Ugh! It's such a headache!

http://jordan.rave5.com/tmpstuff/index.html (This is the one i'm working on) http://jordan.rave5.com/tmpstuff/index2.html (This one resizes correctly...)

I'm using this to change the sizes, but it causes the image to transition sizes, not just 'pop' to the size it needs to be. It also seems to make the elements float suddenly and the content will be under them when you go back to fullscreen.

        // Control Shadow Size
        $(window).load(function() {

            var imageGrad = $('.image-grad'),
                image = $('#header-image-border img'),
                border = $('#header-image-border'),
                grad = $('#header-image-grad');

            function resizeDiv () {
                imageGrad.height(image.height());
                imageGrad.width($(window).width());
                grad.height(image.height());
                grad.width($(window).width());
                border.height(image.height());
                border.width($(window).width());
            }

            resizeDiv();

            $(window).resize(function() { resizeDiv(); });

        });
Was it helpful?

Solution

You don't need any JavaScript to get that effect.

Simplified example:

HTML:

<header>
     <h1>Cats</h1>
</header>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum magnam eaque harum ullam earum accusantium praesentium quia a expedita voluptas inventore porro odit libero aliquid sunt culpa voluptatem! Nesciunt commodi?</p>
    ...
</body>

CSS:

header {
    background: url("//placekitten.com/800/500") black;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding: 15% 0;
}

Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top