resize and positioning image not working
<p>i am re sizing some overlay images on load according to the screensize of the user. But the problem is it does not work everytime it loads. if i refresh too many times it works once . dont know where the problem is as no errors coming too. i have checked in chrome and firefox developer tools also. here is my code can any one suggest what is wrong here.</p>

<pre><code>(function($){ 
$(window).load(function() {
var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
  $('.content').css('height',Height + 'px');

});

$(window).resize(function() {
  // This will execute whenever the window is resized

var Height=$(window).height(); // New height
var Width=$(window).width(); // New width
$('.content-container').css('background-size', Width + 'px' + ' ' + Height + 'px');
var overlayw=$('.content-container').width();
var overlayh=$('.content-container').height();
$('.weare_map').height(Height*.54);
$('.invent_div').height(Height*.4);
var top2= ($(window).scrollTop());
$('.invent_div img').css('top',top2*.4);
$('.weare_map.map1').css('top',top2*.3);
$('.weare_map.pixels').css('top',top2*.2);
$('.weare_map.wearefaces').css('top',top2*.05);
$('.overlay').css('background-size', overlayw + 'px' + ' ' + Height + 'px');
$('.content').css('height',Height + 'px');

});

        })(jQuery);
</code></pre>
