Image Hierarchy - html

Question

Currently learning html by way of coding cool sites I find online. I'm having some trouble figuring out how this site http://sociali.st uses one image for the iPhone case and another image for the iPhone screen (think clipping masks in photoshop). Can't seem to get my head around it?
Here's my code
<div class="row">
<div class="small-6 columns">
<h1 class="value-prop">Organize the <br>things you love.</h1>
</div>
<div class="small-6 columns">
<div class="phone">
<img src="http://sociali.st/wp-content/themes/socialist/library
/images/views/home/home-introduction-screen.png">
</div>
</div>
</div>
CSS
.phone {
width: 359px;
height: 935px;
background-image: url('http://sociali.st/wp-content/themes/socialist/
library/images/components/devices/device-iphone
-5c-perspective-left-shell#2x.png?cache=290611593');
background-size: 100% 100%;
}

Answer 1

The magic is done using absolute positioning and transparent backgrounds, more like photoshop layers.
Check this:
http://codepen.io/anon/pen/dGxhy
Use position: relative in the .phone so we can position its child elements based on its own top/left.
The #phone-content is already above the phone chrome due to the standard stacking order.
Then using the position, top and left properties we can move the content layer to match the desired placeholder
Raed some articles (example http://css-tricks.com/almanac/properties/p/position/) related to the css position attributes and it will be very clear to you ;)

Answer 2

There are many ways to do this, the easiest is probably using absolute positioning:
<div class="row">
<div class="small-6 columns">
<h1 class="value-prop">Organize the <br>things you love.</h1>
</div>
<div class="small-6 columns">
<div class="phone">
<img src="http://sociali.st/wp-content/themes/socialist/library/images/views/home/home-introduction-screen.png">
</div>
</div>
</div>
And css:
.phone {
position:relative;
width: 359px;
height: 935px;
background-image: url('http://sociali.st/wp-content/themes/socialist/library/images/components/devices/device-iphone-5c-perspective-left-shell#2x.png?cache=290611593');
background-size: 100% 100%;
}
.phone img{
top:130px;
position:absolute;
width:285px;
left:25px;
}
I added position:relative; to .phone because we are using the position:absolute; method.
Then, I just placed it to look like the screen.