Why does my background image disappear when I use %?

Question

I'm trying to make a hero style home page for my website but i set the height to a percentage the image disappears. When I use rem or px the image pops up. I want it to be responsive. Is there any way to go about it that im missing?

.main-content {
  background: url(/pictures/picture1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

<div class="main-content">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl rhoncus. Mauris augue neque gravida in fermentum et sollicitudin ac orci. Volutpat lacus laoreet
    non curabitur gravida arcu ac. Ipsum dolor sit amet consectetur adipiscing elit ut.
  </p>

  <button class="btn">Read More</button>

</div>

Think about this: what is the 100% height relative to? 100% of.. what? — Niet the Dark Absol, Aug 09 '20 at 16:07

score 1 · Accepted Answer · answered Aug 09 '20 at 16:07

your div inherits it's height from parent.

.main-content {
  background: url('https://via.placeholder.com/350');
  background-repeat: no-repeat;
  background-size: cover;
  height:100%;
  width: 100%;
}

html,body{
height:100%;}

<div class="main-content">
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl rhoncus. Mauris augue neque gravida in fermentum et sollicitudin ac orci. Volutpat lacus laoreet
    non curabitur gravida arcu ac. Ipsum dolor sit amet consectetur adipiscing elit ut.
  
  <button class="btn">Read More</button>

</div>

Why does my background image disappear when I use %?

1 Answers1