Why background image isn't responsive to browser resize? - html

Question

My background image and its text are responsive to width resizing as long as the browser height is sized to the max. But when decreasing browser (such as Chrome) height the background image doesn't fit the whole window anymore. Any suggestions help!
#header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/img/roses.jpg);
background-size: cover;
background-position: center center;
height: 100vh;
}
.name h1 {
font-family: 'Muli', sans-serif;
font-size: 500%;
font-weight: 300;
text-align: center;
padding-top: 10%;
}
.name p {
font-family: 'Play', sans-serif;
font-size: 150%;
text-align: center;
padding-top: 5%;
}
.navigation p {
display: inline;
}
.navigation {
text-align: center;
padding-top: 10%;
}
.contents:hover {
color: white;
text-decoration: none;
}
.contents {
color: whitesmoke;
text-decoration: none;
}
/* Media Queries */
#media (max-width: 33.9em) {
.name h1 {
font-size: 300%;
}
.name p {
font-size: 100%;
}
}
<section id="header">
<div class="container">
<div class="row">
<div class="col-xs-12 name">
<h1>Temple Naylor</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 name">
<p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world. <br>
NOW AVAILABLE FOR YOU</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 navigation hidden-md-down">
<p><a class="contents" href="#">ABOUT</a> / </p>
<p><a class="contents" href="#">WORK</a> / </p>
<p><a class="contents" href="#">CONTACT</a> / </p>
<p><a class="contents" href="#">PHOTOGRAPHY</a></p>
</div>
</div>
</div>
</section>

Answer 1

Close but a little off. You want background-size: cover
body {
background: url(http://www.hd-wallpapersdownload.com/script/bulk-upload/3d-wallpaper-rose-dowload.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
DEMO
UPDATE:
I was told the OP would like to keep text from scrolling as it shrunk, so here is a version of the text in VW opposed to PX so it becomes responsive as well.
DEMO with responsive text.

Answer 2

When you resize the window, #header is more than 100% of the browser height due the .container inside, therefore the scrolling.
To fix it, add
#header { overflow: hidden; }
body { margin: 0; }
or get the .container out of the #header

Answer 3

you may want to use background-size: 100%;
updated
remove height: 100vh; from header and this should fix the problem
see fiddle
you may want to add background-position: fixed if this suits you, fiddle
see this great tut https://css-tricks.com/perfect-full-page-background-image/