javascript - Background-image resize after window-size -

i'm pretty new web-development , web-design, , i'm working on website company right now(www.momentium.no). want have background image(s) @ top recognize browsers window-size, image(s) fills whole screen , don't show content below before scroll down when load website.

could of check out? great little bit of help!

thanks, yngvar

setting height 100% using css work, you'll have revise html structure in order maintain it's flow when window resized.

otherwise, can try following code snippets:

js:

var $imagewrapper = $('#background-image'),     $contentspacer = $('section#wrapper > header'),      // buffer value, adjust rest of content aligned     buffer = 200;  // set div height on pageload $(document).ready(function() {    var windowheight = $(window).height();     $imagewrapper.height( windowheight );    $contentspacer.height( windowheight ); });  // change div height on window resize $(window).resize(function() {   var $this = $(this),       thisheight = $this.height();    // set height of image container window height   $imagewrapper.height( thisheight );   $contentspacer.height( thisheight - buffer ); }); 

css:

#background-image {   background-size: cover;    // change minimum height page support   min-height: 600px; } 

the rest of code have seems correct, adding these should fix things up. couple of things keep in mind here:

• the js isn't placing limitation on height being applied here, css still apply if window resized 10px height. designs have minimum height/width before breaking, using min-height on #background-image div might idea.

• check browser support before implementing, if need support 1 of unsupported browsers, you'll need either write fallback or restructure code in such way degrades gracefully. ie9+, chrome21+ , ff26+ should enough though.

• looks you're using spacer in main section ensure page content comes in after main slider. structure of page can modified don't have modify 2 element heights. mentioned @ beginning, can use pure css solution if restructure.