How come I can't do height 100% here?

Code:

.multi_bg_example {
  width: 100%;
  height: 200px;
  background-image: url(https://i.imgur.com/LLoz1n1.gif), url(https://i.imgur.com/b7gwf2Q.jpg);
  background-repeat: repeat, no-repeat,
}

<div class="multi_bg_example"></div>

There is no parental fixed reference height, therefore 100% height on a child means nothing.

1 Like
.multi_bg_example {
  height: 100vh;
}

This question has been asked and answered in multiple threads within the last 24 hours.

The other two have been merged here: How would I put a background image behind a gif/animated/transparent image? CSS

Iā€™m closing this one to prevent endless repetition and confusion.