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


.multi_bg_example {
  width: 100%;
  height: 200px;
  background-image: url(, url(;
  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.