Why will my SVG background file not scale up?

My problem is that the browser does not listen to background-size. I even tried to set preserveAspectRatio to none in the SVG but it still does not work.

It should not resize with aspect ratio. Stretching out is fine..

SVG file

To have it a background image in my example, I use a data:image. If you want to know what the SVG file looks like, it's here below:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M 10 10 C 20 20, 40 20, 50 10" fill="000"/>
</svg>

Example

What I expect is that black "banana" to change size to something bigger. I set it to 100px so it should span all the way to the end of the div.

div {
  height: 100px;
  width: 100px;
  background: #eee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' fill='000'/%3E%3C/svg%3E");
  background-position: center 0;
  background-size: 100px 100px;
  background-repeat: no-repeat;
 }

<div></div>

Solution

Because your SVG will take any width or height, and your path is in a fixed position and size, no CSS will do the trick because the scaling won't do anything. Instead, add a viewBox to your SVG. Your SVG will now look like this.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="10 10 40 7.5">
  <path d="M 10 10 C 20 20, 40 20, 50 10" fill="000"/>
</svg>

div {
  height: 100px;
  width: 100px;
  background: #eee;
  background-image: url("https://drive.google.com/uc?id=1_W7AIhdfiwxgU0_FrTsYwyVrZvjzxt18&export=download");
  background-position: center 0;
  background-size: cover;
  background-repeat: no-repeat;
 }

<div></div>

By the way, the drive file background image is just the svg.