Iphone Silhouette With Scrolling Image Inside

I am trying to make a iphone overlay with a scrolling image inside to showcase mobile website designs, but the image isn't scrolling with the overlayed iphone on top is there somet

Solution 1:

You could structure your html like this:

<div class="iphone">
    <div class="container">
        <img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/>
    </div>
</div>

And then with CSS adjust the look :

.iphone {
    width:370px;
    height:800px;
    background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center;
    background-size:100%;
}
.container {
    position:relative;
    top:152px;
    width:293px;
    margin:auto;
    max-height:496px;
    overflow:auto;
}
.container img {
    width:100%;
}

Check this demo Fiddle

Solution 2:

I've forked your example and twaked it a bit. By keeping inner content at constant width we can expand its container vertically and the effect is that like if we only moved scrollbar to the right. Please also note we can setup overflow behavior spearately for x and y axes.

Here's the JSFiddle link:

http://jsfiddle.net/74yh81s4/2/

and the code:

<div class="position: relative">
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px">
</div>
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" />
</div>

Best regards