Inline svg in css is hidden behind div

Question

I am using an inline-SVG in CSS so that the image can be seen. But, it doesn't work, because the image is hidden behind the whole div and even if I add a z-index the image can't be seen. Also, the image is placed at the bottom of the div, and it needs to be at the top.

Below I am placing my HTML and CSS code so that it is easier for you to see what I am doing.

.curve {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270' style='transform: translateY(-5px)'><path d='M-314,267 C105,364 400,100 812,279' fill='none' stroke='#53DD6C' stroke-width='120' stroke-linecap='round' /></svg>");
  background-repeat: no-repeat;
}

<div class="curve">
  <div class="beforeFooter">
    <div id="blankGTitle">
      <h2>Impacting lives.</h2>
    </div>

    <div id="blankGText">
      <h3>Create your event and make a difference.</h3>
    </div>

    <div id="buttono4">
      <nuxt-link to="/create-event">
        <buttons-vue text="create my event" type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" />
      </nuxt-link>
    </div>

    <div id="blankGText2">
      <nuxt-link to="/organiser" id="blankGText2" class="wText">
        <p class="underline">Tell me more</p>
      </nuxt-link>
    </div>
  </div>
</div>

Answer 1

Is there a reason you're including it with background-image? You could try moving it out of the background image and into the HTML, then making it a background with CSS position: absolute.

I've changed your example slightly to include my idea. Let me know if this is not exactly what you're looking for and I can maybe help you a little further?

.curve {
  position: relative;
}

.curve svg {
  position: absolute;
  z-index: -3;
  bottom: 0;
}

.curve svg path {
  fill: none;
  stroke: #53DD6C;
  stroke-width: 120;
  stroke-linecap: round;
}

<div class="curve">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270'> <path d='M-314,267 C105,364 400,100 812,279'/> </svg>
  <div class="beforeFooter">
    <div id="blankGTitle">
      <h2>Impacting lives.</h2>
    </div>

    <div id="blankGText">
      <h3>Create your event and make a difference.</h3>
    </div>

    <div id="buttono4">
      <nuxt-link to="/create-event">
        <buttons-vue text="create my event" type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" />
      </nuxt-link>
    </div>

    <div id="blankGText2">
      <nuxt-link to="/organiser" id="blankGText2" class="wText">
        <p class="underline">Tell me more</p>
      </nuxt-link>
    </div>
  </div>
</div>

Or if you want it at the top, you could rotate it like so:

.curve {
  position: relative;
}

.curve svg {
  position: absolute;
  z-index: -3;
  transform: rotate(180deg);
  top: 0;
}

.curve svg path {
  fill: none;
  stroke: #53DD6C;
  stroke-width: 120;
  stroke-linecap: round;
}

<div class="curve">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='-150 0 1000 270'> <path d='M-314,267 C105,364 400,100 812,279'/> </svg>
  <div class="beforeFooter">
    <div id="blankGTitle">
      <h2>Impacting lives.</h2>
    </div>

    <div id="blankGText">
      <h3>Create your event and make a difference.</h3>
    </div>

    <div id="buttono4">
      <nuxt-link to="/create-event">
        <buttons-vue text="create my event" type="buttonWhiteBackground buttonForInsetShadow buttonForInsetShadow:hover buttonForInsetShadow:active" />
      </nuxt-link>
    </div>

    <div id="blankGText2">
      <nuxt-link to="/organiser" id="blankGText2" class="wText">
        <p class="underline">Tell me more</p>
      </nuxt-link>
    </div>
  </div>
</div>