YoungCoder YoungCoder - 18 days ago 8
CSS Question

Why background image isn't responsive to browser resize?

My background image and it's 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

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.

Comments