title: How to properly use media query to change a style based on display width?
body: <p>I have a style which I want to be different in mobile devices.
  The style is in a stylesheet containing a lot of styles.</p>
  
  <p>The style is like this:</p>
  
  <pre><code>.header_wrapper{
       background-image:bla bla bla;
  }
  </code></pre>
  
  <p>I want the above style to have NO background image when beeing shown in mobile devices with width smaller than say 480px? (just a guess of the width, but feel free to suggest a good width):</p>
  
  <pre><code>.header_wrapper{
       background-image:none;
  }
  </code></pre>
  
  <p>Is it possible to do all this from one stylesheet? Or do I need to copy the entire stylesheet (there are lots of styles) just to change the one style, and then add the stylesheet to the website?</p>
  
  <p>How about order of precedence?</p>