HTML/CSS Only: Uncaught TypeError: Cannot read property 'left' of undefined
<p>I'm using CSS to try to create a background-like image, but without linking the image in CSS.  When I try to load it in Chrome I get a console error saying </p>

<blockquote>
  <p>Uncaught TypeError: Cannot read property 'left' of undefined.</p>
</blockquote>

<p>My <code>html.erb</code> code is:</p>

<pre><code>&lt;div class="row text-center"&gt;
  &lt;%= image_tag 'bg-hero-000.jpg', class: "main-image" %&gt;
&lt;/div&gt;
</code></pre>

<p>And my CSS is:</p>

<pre><code>.main-image {
  min-height: 100%;
  min-width: 1024px;

  width: 100%;
  height: auto;

  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {
  .main-image {
    left: 50%;
    margin-left: -512px;
  }
}
</code></pre>

<p>Can anyone see why I'm getting this error or how to fix it?</p>