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