0

After not using a site I made for about a month i reloaded the site and my hero-image was gone. F12 says the div is only 0 px high.. 

`.hero-image {
    background-image: url("../newhero(1).png");
   /* height: 1000px;*/
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f2f2f2;
}`

And 

<div class="hero-image">
    <div class="hero-text">
        <h1>Judy</h1>
        <p>Interior Design</p>
    </div>
</div>

The letters show up in the navbar, see enter image description here

Bowis
  • 541
  • 8
  • 31
  • Bare in mind, when i set the height to 1000 px, the image does show up – Bowis Nov 13 '18 at 12:03
  • 1
    100% of **what?**. If you haven't defined the height that the 100% relates to the item *will* be 0px tall. - See - https://stackoverflow.com/questions/45785279/height-100-not-working-for-nested-div – Paulie_D Nov 13 '18 at 12:06
  • I want 100% of the image to be shown, so that it will scale in different resolutions – Bowis Nov 13 '18 at 12:17
  • Again, `height:100%` means 100% of the parent div that wraps `.hero-image`. If that has no height set or it cannot be calculated then `height:100%` will resolve to **zero**. You can't size an element to the size of it's background image that way. - https://stackoverflow.com/questions/30319743/fit-div-size-to-background-image – Paulie_D Nov 13 '18 at 12:21
  • Thanks! Set my html & body to 100% and it worked – Bowis Nov 13 '18 at 12:44

0 Answers0