SashayAway SashayAway - 3 months ago 11
CSS Question

How can I create a header with a bg-img which cover the whole screen?

How can I create a with a bg-image which cover the whole screen until you scroll down?

I would like to create a similar this page http://www.viworx.co/sapphire/html/site/index.html where the image (header) covers all the height of the windows until you scroll down it (Also as you can see, it doesn't care how height is your windows, it always covers the full height of your screen until you scroll down)

I was checking its code and working on it (please find it below) but I think I need something else, because as you can see it only cover party of the screen. I don't know what else I need to make it works correctly.

Thanks

I am looking forward to reading your reply guys :)



.header-bg {
width: 100%;
height: auto;
text-align: center;
color: #fff;
position: relative;}

.background {
background-repeat: no-repeat;
background-position: 50% 50%;}
#header-parallax {width: 100vw; background: #fff;overflow: hidden; position: relative;}

.section-overlay {
background: rgba(0,0,0,0.3);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}

.header-body {
display: table-cell;
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
text-align: center;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;}

<header id="header-parallax" class="header-bg background parallax" style="background-image: url(http://www.viworx.co/sapphire/html/site/img/bg-header.jpg); background-attachment: fixed; background-size: 1536px 864px; background-position: 50% -50px;" data-img-width="1920" data-img-height="1080" data-diff="100">
<div class="section-overlay"></div>
<div class="header-body">
<div id="container-top" class="container top" style="opacity: 1;">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12 fixed">
<h1>Great experiences</h1>
<h1 class="texthd" style="display: none;"><span>build</span> great <span>brands!</span></h1>
<h1 class="texthd" style="display: block; opacity: 0.117649;"><span>build</span> great <span>designs!</span></h1>
<h1 class="texthd" style="display: none;"><span>build</span> great <span>teams!</span></h1>
</div>
</div>
<div class="row hidden-xs">
<div class="icon-scroll">
<p>Discover our selected work</p>
<a href="#process" class="page-scroll"><img class="mouse" src="img/mouse.png" alt="Scroll"></a>
<div class="icon-scroll-center"></div>
</div>
</div>
</div>
</div>
</header>

<div style="height:500px"> HELLO HELLO TEST </div>




Answer

You're so close! All you need is a height: 100vh; on your #header-parallax div.

Please see fiddle here: https://jsfiddle.net/5nbLdxgc/

Comments