html - Background img not showing up -


i trying make background header image responsive. need 100% of viewport height or image height, whichever smaller.

an example header banner similar https://brittanychiang.com/v1/

the div size looks correct image don't seems showing up?

created jsfiddle here : https://jsfiddle.net/pnnxm1yf/2/

header {      height: 100vh;      max-height: 850px;  }    #header-banner {      color: #fff;      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzh1qxplxta) center center no-repeat;      background-size: cover;      position: relative;  }
<p>why image not showing up?</p>  <header>    <section id="header-banner">    </section>  </header>   <p>content after image</p>

add height: 100% #header-banner. height 0 atm.


Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -