title: How can I scale background image for mobile using CSS?
body: <p>I'm trying to scale a background image on mobile devices such that the height is rescaled to be 100% of the device height, and the width is cropped as necessary to maintain the aspect ratio.</p>
  
  <p>I'm currently using the following code to center and fix the image:</p>
  
  <p><code>background: url(redlineNoText.jpg) no-repeat center center fixed;</code></p>
  
  <p>I've tried using <code>background-size: cover</code>, but it results in a very large image with only a small portion visible on a mobile browser.</p>
  
  <p>I've also tried <code>background-size: auto 100%</code>, but it results in no background image.</p>
  
  <p>For an example of the problem, please feel free to view <a href="http://www.projectredline.org/" rel="nofollow noreferrer">projectredline.org</a>. The desktop view is what we're going for.</p>
  
  <p>Thanks for your help!</p>