title: Responsive headers image repeating on smaller screen
body: <p>So on smaller screens, my current headers I have managed to get down to the size I want using the @media css styling for responsive.  But as the image in my headers is a background image, it repeats when I shrink it down.  I tried switching it to cover, but the image switches back to being full size, so only shows a small snippet of the image instead.. Here is the code I am looking at;</p>
  
  <p>Page - <a href="http://outsidetheline.co.uk/01.html" rel="nofollow">http://outsidetheline.co.uk/01.html</a>
  (Focusing on the top image header container)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="meta-wrapper parallax" style="background-image: url('content/single_blog_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20"&gt;
      &lt;div id="page_header" class="mini-padding"&gt;
          &lt;div class="container-fluid"&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- end page_header --&gt;
  &lt;/section&gt;&lt;!-- end section --&gt;
  </code></pre>
  
  <p>CSS;</p>
  
  <pre><code>@media only screen and (max-width: 767px)
  .parallax {
      position: relative;
      background-attachment: fixed;
      background-position: center;
      background-size: contain;
  }
  
  @media only screen and (max-width: 767px)
  #page_header .container-fluid {
      padding: 20rem 0 0;
  }
  </code></pre>
  
  <p>The background image css is coming from element-style.
  I tried a few things, such as margin:auto, cover rather than contain etc but it results in the image showing huge rather than nicely fitted.</p>