background image css to cover entire browser window without using "height:100%;"
<p>Is there a way to make a background image in css to cover entire browser screen but be larger when it is smaller, the image becomes longer? </p>

<p>It appears if I set the css with height 100%, it is not mobile responsive, but if I set it without the height 100%, the entire browser screen is not covered. </p>

<p>css</p>

<pre><code>.about{
     background: url("city.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</code></pre>