Colored background with png image - html

Question

I want to create a square white box with png image in it. I want png to follow background while the colour of box doesn't affect it.
Here is the sample of the output that I want:
As for now, the white background color couldn't work after I added background colour on div for image. I want the transparent space of png follow body background color.
jsfiddle
I've attached snippet too. Can someone help me to look into it? Thanks in advance!
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
background-color:white;
}
.title {
margin-top: auto;
width: auto;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
-webkit-text-fill-color: transparent;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>

Answer 1

You need to consider mask here:
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
min-height:100vh;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
}
.title {
margin-top: auto;
-webkit-mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
mask-composite:exclude;
background: #fff;
}
.title img {
visibility:hidden;
}
<div class="wrapper">
<div class="title">
<img src="https://i.ibb.co/Zcvccd9/print-v1.png" >
</div>
</div>

Answer 2

Here is the solution:
Step 1: Set position: absolute
Step 2: Set the width of the .title
Step 3: add a transparent color in between other colors in the linear background.
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
background-color:white;
}
.title {
margin-top: auto;
position: absolute;
width: 97vw;
border: 1px solid black;
background: linear-gradient(-45deg, #ee7752, #ffffff, #3456ab00, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>