How to everlap two background images

Question

section.contact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section.contact {
  background-image: url('https://svgshare.com/i/XxP.svg'), url('https://svgshare.com/i/Xwg.svg');
  background-position: bottom, top right;
  background-position-y: bottom, 20px;
  background-size: 100%, 40%;
  background-repeat: no-repeat;
}

<section class="contact">
</section>

I have two background images, and I want the second one to overlap the first one, like this:

but instead some kind of transparency is applied, ending up like this:

This is the css code:

section.contact {
      background-image: url('/assets/contact/contact-bg.svg'), url('/assets/contact/contact-img.svg');
      background-position: bottom, top right;
      background-size: 100%, 40% ;
    }

I want the contact-img.svg image to overlap the contact-bg.svg image.

The contact-img.svg file starts like this:

<svg width="233" height="158" viewBox="0 0 233 158" fill="none" 
  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule=[...]

I tried adding a fill-opacity="1" like this:

<svg width="233" height="158" viewBox="0 0 233 158" fill="none" fill-opacity="1"
  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd"
[...]

But it didn't work

Answer 1

Changing order of urls and other properties should do the trick.

Every next value in background-image is placed below previous in z axis and the first image has an opacity that is why i looked like it is blended with one another.

section.contact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section.contact {
  background-image: url(https://svgshare.com/i/Xwg.svg), url(https://svgshare.com/i/XxP.svg);
  background-position: top right, bottom;
  background-position-y: 20px, bottom;
  background-size: 40%, 100%;
  background-repeat: no-repeat;
}

<section class="contact">
</section>