title: CSS position fixed does not appear on mobile
body: <p>I have an element like with this css:</p>
  
  <pre><code>element.style {
      background-image: url(image.jpg);
  }
  .panel-image {
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
      position: relative;
  }
  </code></pre>
  
  <p>I am now trying to make it a fixed position, so when i try to do the following:</p>
  
  <pre><code>.panel-image {
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
      position: fixed;
      width: 100%;
      height: 200px;
  }
  </code></pre>
  
  <p>The element no longer appears on the page.</p>
  
  <p>There is an element that wraps around this element:</p>
  
  <pre><code>.twentyseventeen-panel {
      overflow: hidden;
      position: relative;
  }
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry"&gt;
  
  
          &lt;div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);"&gt;
              &lt;div class="panel-image-prop" style="padding-top: 60%"&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;!-- .panel-image --&gt;
  
  
      &lt;div class="panel-content"&gt;
          &lt;div class="wrap"&gt;
              &lt;header class="entry-header"&gt;
                  &lt;h2 class="entry-title"&gt;Our Drinks&lt;/h2&gt;
  
              &lt;/header&gt;&lt;!-- .entry-header --&gt;
  
              &lt;div class="entry-content"&gt;
                  &lt;h2&gt;Coffee and Espresso&lt;/h2&gt;
  &lt;p&gt;&lt;strong&gt;Drip Coffee&lt;/strong&gt;&amp;nbsp;$2.50&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Espresso Shots&lt;/strong&gt; $3.00&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Americano&lt;/strong&gt;&amp;nbsp;$4.50&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Cappuccino&lt;/strong&gt;&amp;nbsp;$4.50&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Macchiato&lt;/strong&gt;&amp;nbsp;$4.50&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Cortado&lt;/strong&gt;&amp;nbsp;$4.50&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Flat White&lt;/strong&gt;&amp;nbsp;$5.00&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Latte&lt;/strong&gt;&amp;nbsp;$4.50&lt;br&gt;
  &lt;em&gt;hot or iced&lt;/em&gt;&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Mocha&lt;/strong&gt;&amp;nbsp;$4.50&lt;br&gt;
  &lt;em&gt;hot or iced&lt;/em&gt;&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Cold Brew&lt;/strong&gt; $4.00&lt;br&gt;
  &lt;em&gt;regular or nitro&lt;/em&gt;&lt;/p&gt;
  &lt;h2&gt;Other Drinks&lt;/h2&gt;
  &lt;p&gt;&lt;strong&gt;Chai&lt;/strong&gt;&lt;strong&gt;&amp;nbsp; &lt;/strong&gt;$4.50&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Iced Tea&amp;nbsp;&amp;nbsp;&lt;/strong&gt;$3.50&lt;br&gt;
  &lt;em&gt;green, black, or white&lt;/em&gt;&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Hot Tea&lt;/strong&gt;&lt;strong&gt;&amp;nbsp;&amp;nbsp;&lt;/strong&gt;$3.00&lt;br&gt;
  &lt;em&gt;english breakfast, ceylon, green, white, chamomile, rooibos, peach&lt;/em&gt;&lt;/p&gt;
  &lt;p&gt;&lt;strong&gt;Flavored Sodas&lt;/strong&gt;&lt;strong&gt;&amp;nbsp; &lt;/strong&gt;$4.00&lt;br&gt;
  &lt;em&gt;raspberry, blueberry, peach, mango, vanilla, mint&lt;/em&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!-- .entry-content --&gt;
  
  
          &lt;/div&gt;&lt;!-- .wrap --&gt;
      &lt;/div&gt;&lt;!-- .panel-content --&gt;
  
  &lt;/article&gt;
  </code></pre>
  
  <p>My question is, how do I get the element with the background image to be fixed.</p>
  
  <p>Here is an example site:</p>
  
  <p><a href="http://www.grogenex.com/" rel="noreferrer">http://www.grogenex.com/</a></p>