html - Hide background-image on smaller using css/jquery -

this question has answer here:

• how can override inline styles external css? 4 answers

remove background image css or jquery (preferably css).

i've situation cannot set background image using css.

i read similar question here in stackoverflow couldn't find solution.

html

<div class="foo" style="background-image:url(http://example.com/gallery/albums/foo.jpg);">  </div> 

css

.foo{     width 400px;     height:300px; } @media screen , (max-width: 200px) {     .foo{         background-image: none;     }   } 

jsfiddle here

the problem you're using inline style background-image , css class media query style , inline styles more specific.

try this:

https://jsfiddle.net/6t7ksdal/3/

.foo{     width 400px;     height:300px;     background-image:url(http://strabo.com/gallery/albums/wallpaper/foo_wallpaper.sized.jpg); } @media screen , (max-width: 200px) {     .foo{         background-image: none;     }   } 

the background image defined in css class it's specificity same media query css. over-ride kicks in when screen resizes.

please note idea pay attention css specificity code more maintainable in future.