jquery - Changing the background image if window is resized to 800px in width -


i'm trying write code changes background-image of body if window resized. code below, doesn't work.

$(document).ready(function(){     if ($(window).width(1000px)(function() {         $(body).css("background-image":"url(images/background-mobile.svg)");     })); });  

can tell me i'm doing wrong here?

your syntax if statement, width() , css() functions , body selector incorrect. need execute code on resize event of window. try this:

$(function() {     $(window).resize(function() {         if ($(this).width() < 1000) {             $('body').css('background-image', "url('images/background-mobile.svg')");         } else {              // default setting desktop here...             $('body').css('background-image', 'none');         }     }); }); 

all being said, should use css media queries this:

@media (max-width: 1000px) {     body {         background-image: url('images/background-mobile.svg');     } } 

Comments