html - DIV not taking 100% viewport height -
as can see on this jsfiddle try div ground picture taking 100% of viewport head (the goal achieve something this)
unfortunately i've tried various things without success (i.e. change height of element-1 100%, method described here, etc.). issue?
many thanks
html
<header> <div class="element element-1"></div> <div class="article-titles"> <h1 class="title">head text</h1> <h2 class="subtitle">sub-head text</h2> </div> </header>
css:
.element { float: left; width: 100%; background-size: 100% auto; background-attachment: fixed; } .element-1 { position: relative; z-index: 8; height: 600px; <-- i've tried change 100% without success border-top: 10px solid rgb(0, 0, 0); background-image: url('http://placehold.it/650x450'); background-position: center center; background-color: rgb(222, 222, 222); }
changing height of .element-1
100% going heighten 100% of height of parent element.
if want background image cover entire viewport attach <body>
or <html>
.
if attach <html>
cover entire viewport , won't have (and should not in fact) set height
attribute on it.
Comments
Post a Comment