Resizing Background image for mobile device

[Japarerb]

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..\[code\]<img style="background:url(images/pic3.jpg)" src="http://stackoverflow.com/questions/15831073/images/new.png" alt="" /></a>\[/code\]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..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..here is a little more of my html..\[code\]<div class="thumbnail"> <a href="http://stackoverflow.com/questions/15831073/#"> <img style="background:url(images/pic3.jpg)" src="http://stackoverflow.com/questions/15831073/images/new.png" alt="" /> </a> </div>\[/code\]And here is the mobile css in question..\[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\]So basically, I just need to know, how to make the background image scale down like the foreground image (the .png image)I'm sure someone can help, so many thanks in advance.EDIT: Here is a quick fiddle, so you can see whats going on... http://jsfiddle.net/bBMdp/Thanks