title: Responsive design - new background image will not show in smaller viewport
body: <p>I'm pretty new to css and I am working locally so I cannot provide the exact address, but here goes:</p>
  
  <p>I am using the <a href="http://wpexplorer.me/adapt/" rel="nofollow">wpexplorer adapt theme</a> which has a responsive layout.  I set up the wrapper background in the style.css like so:</p>
  
  <pre><code>    #wrap{
      background: url(images/scribble-top.jpg) center top no-repeat #fff;
      margin: 0 auto;
      width: 1040px;
      padding: 0 30px;
  }
  </code></pre>
  
  <p>When I moved into responsive.css to start designing the other viewpoints I wanted to use a new background image for the wrap div in the tablet portrait view but for some reason the new image will now show up at all (just remains blank) and the style.css background appears again when I shrink it to the mobile viewports.   Here is my coding:`</p>
  
  <pre><code>/* #Tablet (Portrait)
  ================================================== */
  
  /* Note: Design for a width of 740px */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
  
  body {background: #000;}
      #wrap {background: url(images/scribble-top-680.jpg) no-repeat center top #fff; width: 680px; overflow:inherit;}
      .hp-highlight, .portfolio-item, .home-entry, #footer-one,#footer-two,#footer-three,#footer-four{ width: 155px;  }
      #home-tagline{ font-size: 21px; }
      #search { text-indent: -9999px; }
      .loop-entry-thumbnail{width: 35%;}
  
  }
  </code></pre>
  
  <p>It should be noted that the new image is the exact width of the new wrap div size and that the height is not relative as it is just a banner-type image at the top of the wrapper thus should not interfere with wrap div height.  </p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks in advance for your help!!!
  `  </p>