-1

basically my question is the same as this one: SVG path as div dackground

I tried the solution given there, and it works in general. My problem: I need to change the color of the line made with the SVG. It is rendered in black and when I add the "fill"-Attribute to the path, nothing is rendered at all.

This is my rendered background image in the dev-tools

Thank you in advance.

Rabokke
  • 41
  • 1
  • 5

3 Answers3

-1

Background img isn't a part of the DOM and you can't manipulate it. Possibility would be to use it regularly, embed it in a page in a normal way, but position it absolutely, make it full width & height of a page and then use z-index css property to put it behind all the other DOM elements on a page.

Rahul Fernando
  • 41
  • 5
-1

Only you need to do is to add fill and fill-opacity property in style attribute like this

<path style="fill:red;fill-opacity:1;" ...>

div.back {
  width:600px;
  height:120px;
  background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 4442 720"><path style="fill:red;fill-opacity:1;" d="M36,297.64c317.62,0,428,134.58,696,136.74S1160,364,1436,389s431.72-102.09,618-91.36,505.93,73.37,715,72.29,339,72,674,64.45,712.27,157.83,920,174l46,111.14H36Z" ></path></svg>');
  background-size:cover;
  background-color:pink;
}
<div class="back"></div>
Zuhair Hussain
  • 24
  • 4
-1

Well, it's really wired.
I have found a solution, you can write <path fill="blue" (with the name of the color similar to the result you want) and it works. But if you write #00F or "#00F" instead of "blue" it doesn't work!!! The reason is unknown, so I suggest you to use the name of a color similar to the hexadecimal rgb you want.
Anyway, for the background-color if you write for example background-color:#7d212b; rather than background-color:pink; it works!

Giulio Marchesi
  • 12
  • 4
  • My question was flagged as duplicate and the following was linked in the message: https://stackoverflow.com/questions/30733607/svg-data-image-not-working-on-firefox-or-chrome-72 And the solution given there actually works :) replace the '#' from the color code with '%23' and it works - the reason given is, that it is a url and therefore can't handle the '#' character ^^ – Rabokke Oct 01 '20 at 14:17