title: Image resize differently on phone vs. tablet?
body: <p>I'm working on a Wordpress site where I have a background image that serves as my logo and my actual header image is transparent. I'm using this code to resize the background image for mobile:</p>
  
  <pre><code>@media (max-width: 767px){
  body.custom-background {
      background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
      background-position: 50% top;
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-size: 70% auto;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>The problem I'm having is that it looks good on a tablet but is too small on a phone. I'd like it to be wider on phone only and there is a bunch of empty space below it. I think the space may have to do with my header image needing to be resized too.</p>
  
  <p>Is there a way to resize the transparent header image too, but only on a phone, not tablet? And is there a way to resize this background image differently on a phone vs. tablet? That code sets it to 70%, which is great on the tablet, but I'd prefer larger on a phone.</p>
  
  <p>You can <a href="http://www.gleefulthings.com/WPtestblog/" rel="nofollow noreferrer">view my website here</a> if needed. This is my first time working with a mobile layout. Any help would be much appreciated! :)</p>