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

HTML & CSS
1

Changing 300px to 100% doesn’t do it.

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

Hi there asasass,

like this perhaps…

https://jsfiddle.net/jr0f7h3a/

… :biggrin:

coothead

3

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

4

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
5

How would I remove the vertical scrollbar?

6

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
7

for uniformity, you might want to add…

    background-position: center center;

coothead

8

With: background-position: center center;

Without: center center

9

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;

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.