Resizing 1) background images and 2) div's containing images

Question

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Answer 1

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}