How can I set different code base on @media

How can I set different code base on @media

I'm a novice with jquery.  I wanted to have the main background image on my site fade in when users first come to the site.  I was able to accomplish that with some code I found.  

$(document).ready(function() {
    $('#back').animate({opacity: 0}, 0).css({'background-image': 'url( http://bobpower.net/wp-content/uploads/2014/12/group-celebrate.jpg)'}).animate({opacity: 1}, 3500);
});



I had it setup before hand to change the background image based on different screen sizes using @media and css but now the background is being set with this jquery.  

Is the a way to accomplish with with jquery?