CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3807284
user3807284

Reputation: 21

Background-image resize using window-size

I am currently working on a project that requires a div a with background image to resize to the window height of the browser. That part works, but i am hung up on getting the background-size css class to change based on my code:

$(document).ready(function() {

  var mydivs = $("section#bottle,#bottle>div:nth-of-type(1)"), w = $(window);

  w.bind("load resize",function() {
        var windowHeight = $(window).height();
        var windowWidth = 'auto';
        mydivs.css({width:w.width(),height:w.height()});
        mydivs.css({ backgroundSize : windowWidth + ' ' + windowHeight });

  });

})

Upvotes: 2

Views: 78

Answers (3)

Byndd IT
Byndd IT

Reputation: 297

use css for this

  <style> 


      html { 
          background: url(images/bg.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
      }


</style>

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

The key problem I have faced on this type of issue is css jquery as in the following example:

.css({backgroundSize: '400px 300px'});//won't work
.css(backgroundSize,'400px 300px');//works

So, first try changing

mydivs.css({ backgroundSize : windowWidth + ' ' + windowHeight });

with:

mydivs.css( backgroundSize , windowWidth + ' ' + windowHeight);

If it's not what you are having the problem then try this:

$(document).ready(function() {

  var mydivs = $("section#bottle,#bottle>div:nth-of-type(1)");

  w.bind("load resize",function() {
        var windowHeight = $(window).height();
        var windowWidth = 'auto';
        mydivs.css({width:windowWidth + 'px',height:windowHeight + 'px'});
        mydivs.css({ backgroundSize : windowWidth + 'px' + ' ' + windowHeight + 'px' });

  });

})

Upvotes: 0

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

could try just using css background-size:cover and or background-size:100%.

To handle the offsets / aspect ratio and various sizes, we can set the image larger ( to give it 'play' ) than we need and then set an over percentage eg .

background-size:120%

Upvotes: 1

Related Questions