title: CSS - how to make responsive images
body: <p>I've been just dabbling with responsive web design.  I'm trying to change my existing site so that it wil work on mobile devices as well as on a desktop.  I've been reviewing some examples on the internet such as <a href="http://2012.inspireconf.com/" rel="nofollow">http://2012.inspireconf.com/</a>.</p>
  
  <p>My question this - when it comes to images... what's the proper way to make them scale to different browser sizes?  I've tried the following test in my css:  </p>
  
  <pre><code> @media only screen and (max-width: 980px) {        
  .hero-unit {
    background: url("../img/1.jpg") 100% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  
   @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
  .hero-unit {
    background: url("../img/2.jpg") 100% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  
   @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
  .hero-unit {
    background: url("../img/3.jpg") 100% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  
   @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
  .hero-unit {
    background: url("../img/4.jpg") 100% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  </code></pre>
  
  <p>The image files are just simple pictures with different numbers - starting from 1-4.  This was just to give me a visual queue as to which image file is being loaded.  As I resize my browser on my desktop, i can see that my media queries are working... the different images are being loaded.</p>
  
  <p>But then it struck me that if i were doing this for a real site, this would mean that I would have to create 5 different versions of the same picture!</p>
  
  <p>So is the "proper" way to do this to create one massive picture / image, and then shrink it as I go along?  Meaning, should my css look like this instead: </p>
  
  <pre><code> @media only screen and (max-width: 980px) {        
  .hero-unit {
    background: url("../img/1.jpg") 40% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  
   @media only screen  and (min-width: 981px) and (max-width: 1081px) {   
  .hero-unit {
    background: url("../img/1.jpg") 60% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  
   @media only screen  and (min-width: 1082px) and (max-width: 1181px) {  
  .hero-unit {
    background: url("../img/1.jpg") 80% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  
   @media only screen  and (min-width: 1182px) and (max-width: 1281px) {  
  .hero-unit {
    background: url("../img/1.jpg") 100% no-repeat;
    height: 7em;
    width: 14em;    
    padding: 0.5em;
    margin-bottom: 2em;
    background-color: #eeeeee;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }   
   }
  </code></pre>
  
  <p>I tried this but the image didn't seem to scale but I'm not sure if it's just because I didn't create the image properly in the first place.  (I'm not a graphic designer).</p>
  
  <p>Thanks!</p>