Não sei se te atende, mas vc pode usar um Background imagem na tag Figure, e os PNGs por cima.
Fiz abaixo um modelo bem simples do que estou falando. (Exiba também "Página Toda" para ver mudando as imagens.)
.item {
background: url(http://placecage.com/600/200) no-repeat;
background-size: cover;
padding: 10px;
position: relative;
display: flex;
}
picture {
margin: auto
}
<figure class="item">
<picture>
<source srcset="https://cdn.sstatic.net/Sites/br/img/sprites.svg?v=554232ea0d79" media="(min-width:768px)" />
<source srcset="https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w170" media="(min-width:450px)" />
<img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />
</picture>
</figure>
Usar dois .png ao mesmo tempo da forma que vc quer fica complicado, pq se eles tiverem o mesmo media="(min-width: ;)"
um vai sobrescrever o outro, e com valores diferentes eles nunca vão aparecer ao mesmo tempo entende.
Outro exemplo, agora com Duas imagens. Só que são usei duas tags <img>
com o srcset
e sizes
dentro dela. O background-image
está na tag <figure>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.item {
background: url(http://placecage.com/600/400) no-repeat;
background-size: cover;
padding: 10px;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
height: 60%;
}
img {
margin: auto;
}
<figure class="item">
<picture>
<!-- <source srcset="no.png"
media="(min-width:400px)"
/> -->
<!-- <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" /> -->
<img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png"
srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-512.png 800w,
https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-256.png 400w,
https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png 200w"
sizes="(min-width: 33%) 33.3vw,
50vw"
alt="A rad wolf" />
<img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png"
srcset="https://cdn4.iconfinder. com/data/icons/icocentre-free-icons/137/f-check_256-512.png 800w,
https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-256.png 400w,
https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png 200w"
sizes="(min-width: 33%) 33.3vw,
50vw"
alt="A rad wolf" />
</picture>
</figure>
Sugiro também a leitura desses dois artigos para entender melhor o srcset e sizes
https://ericportis.com/posts/2014/srcset-sizes/
https://bitsofco.de/the-srcset-and-sizes-attributes/