How do you add 100% height to an svg data image?

HTML-CSS
1

Changing 300px to 100% doesn’t do it.
https://jsfiddle.net/k1cg9v4z/7/

div {
  width: 100%;
  height: 300px;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg  id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%230110fe' fill-opacity='1'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
2

100% of what?

The only parent elements are the body and html, do they have a height you can use 100% of?

If you give the body height: 100vh; then the 100% on the div will be just that.

1 Like