omdx omdx - 5 months ago 9
CSS Question

make 100% height image background? Site example andr*id.com

I want make 100% auto height. just like android.com.
Here what I try:

HTML



<div class="android-be-together-section mdl-typography--text-center">
<div class="logo-font android-slogan">Hey Yah!</div>
<div class="logo-font android-sub-slogan">SIPAK Online 2.0</div>

<a href="#screens">
<button class="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">expand_more</i>
</button>
</a>
</div>


CSS



.android-be-together-section { position:relative; background:url(../images/cover.jpg) ; background-size: cover; background-position:center; height:100%;}


example: www.android.com

Answer

Making the height 100 vh instead if 100% will work. Vh stands for viewport height.

.android-be-together-section { position:relative; background:url(../images/cover.jpg) ; background-size: cover; background-position:center; height:100 vh;}
Comments