HTML - CSS Putting Image into a Frame

I want to put images into a frame (where frame is iPhone Picture).

I want that images seems like the screen of the iphone.

From CSS point of view is enough doing this:

> img.pic{padding:100px; background: url(iphone_bk.png) no-repeat}

Where each image has an iphone background (iphone_bk.png) and the padding has to开发者_如何转开发 be adjusted in order to fit exactly in the screen of the iphone.

Any suggestions?

I'd use a div that's the size of the iPhone image, and set the phone image as the background with background: url(iphone_bk.png) no-repeat, as you have done above. I'd then put an img tag inside the div and use that to hold the 'screen' image, like this:

HTML:

<div id="container">
    <img src="img.png">
</div>

CSS:

#container
{
    background: url(iphone_bk.png) no-repeat
    padding: 10px 5px 5px 10px         // Change this to whatever padding makes 
                                       // your 'screen' image fit the iPhone image
}

Yes, that works.

You can specify separate padding for the top, right, bottom and left borders, which should be useful to position the screen area on the phone image. Example:

img.pic {
  padding: 30px 10px 50px 10px;
  background: url(iphone_bk.png) no-repeat;
  width: 120px;
  height: 200px;
}

you can use position:relative; for the screen.

html

<div class="iphone">
  <div class="screen"></div>
</div>

css

.iphone {
    background:url(iPhone-Screen-001.png) no-repeat;
    height: 371px;
    width: 200px;
}
.iphone .screen {
    width:155px;
    height:223px;
    background:#39F;
    position:relative;
    top:76px;
    left:22px;

}

live example: http://jsbin.com/epewi3

you can change the blue background with a background image in the .iphone .screen selector