title: Resizing Background image for mobile device
body: <p>Right then, I've just been playing with my site, and adding a "new" banner onto some of the images, I've done this the simplest way I could think which is as follows..</p>
  
  <pre><code>&lt;img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Now this works fine when viewed on a desktop as the images are already the right size for the site, but when I view it on a mobile device the .png image  is scaled down, but not the background image..</p>
  
  <p>I know I'm missing something from the css, but as I'm still learning, I don't know exactly what its missing, which is where you guys come in..</p>
  
  <p>here is a little more of my html..</p>
  
  <pre><code>&lt;div class="thumbnail"&gt;
      &lt;a href="#"&gt;
          &lt;img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /&gt;
               &lt;/a&gt;
                   &lt;/div&gt;
  </code></pre>
  
  <p>And here is the mobile css in question..</p>
  
  <pre><code>.thumbnails
  {
  }
  
      .thumbnails .thumbnail
      {
          border-top: solid 1px #e5e5e5;
          padding-top: 2em;
          margin-top: 2em;
      }
  
      .thumbnails .first
      {
          border-top: 0;
          padding-top: 0;
          margin-top: 0;
      }
  
      .thumbnails .thumbnail img
          {
              margin-top: 5px;
              height: 180px;
              margin-right: 8px;
          }
  
      .thumbnails .thumbnail blockquote
          {
  
              margin-left: 143px;
          }
  </code></pre>
  
  <p>So basically, I just need to know, how to make the background image scale down like the foreground image (the .png image)</p>
  
  <p>I'm sure someone can help, so many thanks in advance.</p>
  
  <p>EDIT: Here is a quick fiddle, so you can see whats going on... <a href="http://jsfiddle.net/bBMdp/" rel="nofollow">http://jsfiddle.net/bBMdp/</a></p>
  
  <p>Thanks</p>