Wave background on top and bottom of a section

Question

I have a section FAQ, which I would like a top section to have top wave background and bottom section also to have a wave background

I would like to have something like this

Here is what I have so far

HTML

<section id="faq">
  <div id="details">
  </div>
</section>

css

#faq{
  background-image: url("wave-top.svg")
  background-repeat: no-repeat, repeat;
  background-color: blue;
}

Here is two images I have for background

Top wave

Bottom wave

What do I need to do to get what I want?

Answer 1

Use multiple background and adjust the background-size/background-position:

.box {
  padding:11% 0; /* The padding is the area for the shapes, adjust it based on the ratio of the shape*/
  height:100px; /* to illustrate the space for the content */
  background:
    url(https://i.sstatic.net/mG3Vb.png) top   /100% auto,
    url(https://i.sstatic.net/JSEyE.png) bottom/100% auto,
    linear-gradient(#387dff,#387dff) content-box; /* Color between the shapes only on the content and not the padding*/
  background-repeat:no-repeat;
}

<div class="box">
</div>