title: Getting the background image on my homepage centered like my other pages
body: <p>I am almost done with <a href="http://blackbottle.com.au/" rel="nofollow noreferrer">my WordPress website</a> that's using the Pique theme.  The one problem is that on mobile, the background image on the homepage is left-justified and doesn't change sizes with the screen size. On the Menu and Drinks pages, the background looks perfect on mobile. </p>
  
  <p>So the goal is to get the header background image on the homepage to look like it does on the Menu and Drinks pages.</p>
  
  <p>I've tried playing around a lot with the code I already have to edit the automatic overlay the theme comes with:</p>
  
  <pre><code>.pique-panel-background::before {
      background: rgba(0, 0, 0, 0.0);
  }
  
  .pique-panel-background {
      opacity: 1 !important;
      min-height: 100%;
      min-width: 1024px;
      /* Set up proportionate scaling */
      width: 100%;
      height: auto;
      /* Set up positioning */
      position: fixed;
      top: 0;
      left: 0;
  }
  </code></pre>
  
  <p>I've also tried using the classes .body.custom-background, changing min-height and min-width, changing the position of the background to fixed or center or top center, maybe I'm just using the wrong callout but I can't find the name of the element! tried an @media callout I found on a few forums but can't get it to work right. </p>
  
  <p>I bet my problem is that I am not using the right element callout because everything I've tried mostly hasn't changed anything :/</p>