title: Resize header image for mobile
body: <p>I have been trying to set a header image for my WordPress blog but I can't get it to work properly for small screens as the image gets smaller. </p>
  
  <p>Also, the image goes down when you click the menu on the mobile version. </p>
  
  <pre><code>&lt;header id="masthead" class="site-header" style="background-image: url(&lt;?php header_image(); ?&gt;);background-repeat:no-repeat; background-size:contain; background-position:center;"&gt;
  
  .site-branding {
        padding: 85px 0;
      }
  
  header.site-header{
          margin-bottom: 40px;
      }
  </code></pre>
  
  <p>Here's the blog for reference: <a href="http://semdesculpas.org/" rel="nofollow noreferrer">http://semdesculpas.org/</a></p>