CODEWITHSUNDEEP
csssvgbackground-imagescale
abalter
abalter

Reputation: 10383

SVG as background image not appearing

I've tried the usual solutions I'm finding on the net, but can't get the background image to appear.

In the first header, the SVG image seems to push out its container much farther than necessary for its viewBox. In the 2nd header, the background image doesn't appear at all. (SVG code is the same)

HTML:

header {
  margin: 1rem auto 0 auto;
  border: 1px solid red;
}

.container {
  border: 2px dotted orange;
}

.container svg {
  border: 1px dashed blue;
  width: 100%;
  height: 100%;
}

#inline-svg {
  border: 2px dashed pink;
}

#header1 {}

#header2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='background-svg' width='400px' height='200px' viewBox='0 0 400px 200px'>
 <ellipse cx='200' cy='100' rx='200' ry='100' fill='green' /> </svg>");
 background-size: auto auto;
}

#background-svg {
  border: 3px solid black;
}
<header id="header1" class="masthead">
  <div id="1st-container" class="container">
    <svg xmlns='http://www.w3.org/2000/svg' id='inline-svg' width='200px' height='100px' viewBox='0 0 200px 200px'>
      <ellipse cx='200' cy='100' rx='200' ry='100' fill='green' />
    </svg>
  </div>
</header>

<header id="header2" class="masthead">
  <div id="2nd-container" class="container">
    hello
  </div>
</header>

https://jsfiddle.net/abalter/c4fmou2n/

Upvotes: 0

Views: 4066

Answers (1)

Manish Patel
Manish Patel

Reputation: 3674

When you add svg code in url please not break it otherwise it was not working.

header {
  margin: 1rem auto 0 auto;
  border: 1px solid red;
}
.container {
  border: 2px dotted orange;
}
.container svg {
  border: 1px dashed blue;
  width: 100%;
  height: 100%;
}
#inline-svg {
  border: 2px dashed pink;
}
#header1 {}
#header2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='background-svg' width='400px' height='200px' viewBox='0 0 400px 200px'><ellipse cx='200' cy='100' rx='200' ry='100' fill='green' /> </svg>");
  background-size: auto auto;
}
#background-svg {
  border: 3px solid black;
}
<header id="header1" class="masthead">
  <div id="1st-container" class="container">
    <svg xmlns='http://www.w3.org/2000/svg' id='inline-svg' width='200px' height='100px' viewBox='0 0 200px 200px'>
      <ellipse cx='200' cy='100' rx='200' ry='100' fill='green' />
    </svg>
  </div>
</header>

<header id="header2" class="masthead">
  <div id="2nd-container" class="container">
    hello
  </div>
</header>

Upvotes: 2

Related Questions