Fire jQuery on resize and browser width

Question

I was having issues with background-size in IE, so I found a JavaScript that allows it to work in IE, but I only want background-size applied if the screen width goes below 768 pixels.

Here is my current script:

$(window).resize(function() {
    if($(window).width() > 768)
       jQuery('#header').css( "background-size", "cover" );
});

This works once you start resizing, but once you get below 768 it doesn't remove background-size and the initial state does not have background size either. Any ideas? Thanks!

Answer 1

Your answer is nearly correct. All you need to do is add an else.

$(window).resize(function() {
    if($(window).width() > 768) {
       jQuery('#header').css( "background-size", "cover" );
    } else {
       jQuery('#header').css( "background-size", "whatever" );
    }
});

I'm concerned about you writing all over the place jQuery so what you can do is also:

jQuery(function( $ ) { // DOM ready and secured jQuery's $ alias

  // Use freely $ alias
  var $header = $('#header'); // Cache your selectors
  $(window).resize(function() {
    $header.css({backgroundSize:$(this).width()>768?"cover":"whatever"});
  });

  // Other $ code here

});