Add image behind CSS mask - html

Question

How do can I get the background image look like it's being shown on the phone? So I have the iPhone masked and I want to put an image on the screen of the phone. How do I do this? I tried playing with z-index but it doesn't work. Here's what I'm trying to achieve
div{
width: 302px;
height: 605px;
background-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_large_2x.jpg);
background-size: 302px 605px;
background-repeat: no-repeat;
-webkit-mask-size: 302px 605px;
-webkit-mask-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_mask_large.svg);
-webkit-mask-repeat: no-repeat;
position: relative;
z-index: 2;
}
.background{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 265px;
height: 571px;
background-image: url(https://www.apple.com/v/iphone-xr/d/images/overview/screen_display_iphonexr_large_2x.jpg);
background-size: 265px 571px;
}
<div>
</div>
<div class="background"></div>

Answer 1

The problem you were having is that the div styles you applied to the phone were also being applied to the .background. By giving the phone it's own separate class you can style them individually.
I've updated your example below.
.phone {
width: 302px;
height: 605px;
background-color: white;
background-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_large_2x.jpg);
background-size: 302px 605px;
background-repeat: no-repeat;
-webkit-mask-size: 302px 605px;
-webkit-mask-image: url(https://www.apple.com/v/iphone-xs/d/images/overview/hardware_display_iphonexsmax_gold_portrait_mask_large.svg);
-webkit-mask-repeat: no-repeat;
position: absolute;
z-index: 2;
}
.background {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
width: 280px;
height: 580px;
border-radius: 10px;
background-image: url(https://www.apple.com/v/iphone-xr/d/images/overview/screen_display_iphonexr_large_2x.jpg);
background-size: cover;
}
<div class="phone"></div>
<div class="background"></div>