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

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");
}

Hi there asasass,

like this perhaps…

https://jsfiddle.net/jr0f7h3a/

:biggrin:

coothead

What if I changed it to padding: 100%; instead. And removed width:100%;

https://jsfiddle.net/4qnt5j9u/1/

Hi there asasass,

that will create a horizontal scrollbar. ::eek:

Keep the “padding-top: 100%;” and
just remove the “width: 100%;” .:winky:

coothead

1 Like

How would I remove the vertical scrollbar?

I would do away with the "div element " and apply the
background-image to the "body element " instead…

https://jsfiddle.net/otschmau/

coothead

1 Like

for uniformity, you might want to add…

    background-position: center center;

coothead

With: background-position: center center;
https://jsfiddle.net/9rzfp278/1/

Without: center center
https://jsfiddle.net/9rzfp278/3/

The question should be “where do you (asasass) want the center of the background-image to be?” The default position is top left. While it may not seem to make a difference with this small image, the eye tends to notice such things as a page is zoomed or as a large, fixed size image overflows the edge of its container. Either way, it’s your call.

To test your fiddles, add this one line to the <body> element’s CSS.
background-repeat:no-repeat;