title: Hiding an inline image in css and displaying another one while the screen is smaller
body: <p>My issue is that when I have the page full screen I need it to display the header image and navigation bar. But when it is shrunk for mobile use I need it to display a different heading. The problem is that I can either get both images to display, which looks weird. Or I can get neither to display. I tried assigning and id to call within the css but no luck. With the posted code it displays neither but if I take out the header img display none, they both show up. First post here so I am sorry if there is any confusion <strong>here is my html</strong>
  </p>
  
  <pre><code>  &lt;header&gt;
  
       &lt;nav class="horizontal"&gt;
          &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Courses&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Facilities&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Membership&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Tee Times&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Restaurant&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/nav&gt;
  
       &lt;img src="willet.png" alt="Willet Creek" /&gt;
  
    &lt;/header&gt;
  </code></pre>
  
  <p><strong>and here is my css</strong></p>
  
  <pre><code>header nav, header img,  #main, aside, footer {
      display: none;
  }
  
  /*mobile styles */
  
  html {
          background-color: rgb(107,  140, 80);
  }
  
  /*header styles */
  header {
      background: rgb(151, 201, 151) url(willet.jpg) left center no-repeat;
      -o-background-image-size: contain;
      -moz-background-image-size: contain;
      -webkit-background-image-size: contain;
      background-image-size: contain;
      background-image-width: 100%;
      background-image-height: 50px;
  }
  </code></pre>