CODEWITHSUNDEEP
htmlcsssvg
user3475602
user3475602

Reputation: 1217

Make css background image (svg) responsive

I want to use a SVG file as background image (css).

Here is my SVG:

<?xml version="1.0"?>
<svg width="428" height="100" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->

 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="102" width="430" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="400" width="580"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <text stroke="#000" transform="matrix(1.22606 0 0 1.22606 -24.7533 -46.6879)" opacity="0.3" font-style="italic" xml:space="preserve" text-anchor="left" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="87.150366" x="22.228393" stroke-width="0" fill="#000000">Hello world!</text>
 </g>
</svg>

I encoded it with http://b64.io and used it like this:

#new-hello-world {
  background-image: url(…);
  background-repeat: no-repeat;
}

Now my problem is that the SVG is not responsive. How can I solve this?

Any help would be greatly appreciated.

EDIT:

I already tried to make the svg width and height 100% but that did not work.

Upvotes: 2

Views: 1765

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

Give the <svg> element a viewBox attribute e.g. viewBox = "0 0 428 100" although chipChocolate.py's suggestion of viewBox="0 0 580 400" might work better depending on exactly what you want to see.

Upvotes: 2

Related Questions