title: Wordpress and Bootstrap media query background image
body: <p>I have a website which uses the following code to show one of two background images depending on what page of the site you are in. Media queries/responsiveness is handled by Twitter bootstrap.</p>
  
  <pre><code>&lt;body &lt;?php body_class(); ?&gt;&gt;
  &lt;?php if( is_front_page() ) : ?&gt;
  &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/img/background-home.jpg" class="bg"&gt;
  &lt;?php else : ?&gt;
  &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/img/background-main.jpg" class="bg"&gt;
  &lt;?php endif;?&gt;
  </code></pre>
  
  <p>This works great - but now i need to introduce a 3rd background image (a smaller one) for mobile use.</p>
  
  <p>If I target the new mobile background image in css like this...</p>
  
  <pre><code>@media (max-width: 480px) {
  body {
  background-image: url('images/mobile-background.jpg');
  background-repeat:no-repeat;
  background-position: center top;
  }
  </code></pre>
  
  <p>...it doesn't work.</p>
  
  <p>Any ideas on how I can modify the header code to make sure this mobile background repalces all others on mobile only?</p>