My approach on a site I’m currently working is to use min-width media queries to build up the page as the screen gets bigger. Background images of components are content managed so they are set using inline styles. However the designs dictate that the background images don’t appear on small screens.
I’m aware that background-image: none !important; will override inline styles for the mobile version but how do I effectively override this !important declared later in the stylesheet?
One approach since it’s a no-repeat background is to position the background -10000px or something but the mobile users will still download this resource unfortunately so I’m hoping there are better suggestions. Cheers.
[CodePen](http://codepen.io/duncanmcdougall/pen/GAuzb “Example on CodePen”)