```css
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;
}
```

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

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

[![enter image description here](https://i.stack.imgur.com/G8vGU.png)](https://i.stack.imgur.com/G8vGU.png)

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

[![enter image description here](https://i.stack.imgur.com/nM8Bl.png)](https://i.stack.imgur.com/nM8Bl.png)

This is the css code:

```css
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:

```xml
<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:

```xml
<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