title: Changing image src depending on screen size
body: <p>I'm trying to change the image src depending on the screen size using media queries. I tried background:url(x); but it didn't work. I read somewhere that I should use content:url(x) instead, but when I do so, I get a blank page. Can anyone tell me what's wrong with my code?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container" id="at-header"&gt;
    &lt;img class="image" id="logo" src="img/logo_white.png" /&gt;
    &lt;img class="image" id="main-img" src="img/desktop_homepage.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media screen and (max-width: 767px){   
      #main-img{      
          content:url("img/mobile_homepage.jpg");
      } 
  }
  
  @media screen and (min-width: 768px) {      
      #main-img{      
         content:url("img/tablet_homepage.jpg");
       } 
  } 
  @media (min-width: 992px){      
        #main-img{        
            content:url("img/desktop_homepage.jpg");  
        } 
  }
  @media (min-width: 1200px) {    
       #main-img{         
           content:url("img/desktop_homepage.jpg");   
       } 
  }
  </code></pre>