I want to show a png file on the iphone screen. It is in an html page, and I want it to pretty much take up the entire screen on the iphone 5. I looked up the size and resolution of the screen on the internet and it says the screen is 1136px x 640 px and 326 ppi. 4.87 in x 2.31 in. So in the html I have this style for the div with the png in it: .picture {width:640px; height:1136px; background-image:url("eye.png"); background-repeat:no-repeat; But when the app is run in the simulator, the picture vertically is ok, but the width is only about 2/3 of the screen. Where is the discrepancy? Thanks Steve

Do you have this in your HTML Header section: <meta name="viewport" content="width=device-width, initial-scale=1.0"> This might not be a fix, but it allows the page to utilize the entire device screen, supposedly. Cheers! -- Smug

Smug, That worked well, after taking out the image size parameters, the png takes up the who screen which is what I want. But now I have another question. The reason I put in the parameters for the image size was I have another div, called words, which lies inside the first div which is the png. This div is to contain words and I want it to occupy a certain area on the screen. Before your technique I did the following: .words {position:relative;display:table-cell;vertical-align:middle;width:300px; height:600px;padding:2px;border:2px;border-color:red;border-style:solid;text-align:center;color:white; font-size: 1em; line-height:1.2em;left:15px;top:11px} I knew I was going to have to fiddle with this to get it right, but it at least gave me close to what I want. Now after adding the viewport as you suggested, this .words div fills the entire screen too. How can I style it to my specifications now with the viewport seemingly taking over and making it full screen too? Thanks Steve

You're talking CSS, of which I was a very poor student. I'm afraid I would have to defer to someone else's knowledge on this. Or maybe you can find a tutorial that would help a bit. Possibly some software that has WYSIWYG friendly editing might be around...? Cheers! -- Smug

Hi @SteveK, Instead of setting the background of a Div, would setting "background-image" item in your page Body work? Example: body {background-image:url("eye.png");} It can even be fixed or scroll with the page. More info on setting these options for size, repeat, etc. is here: http://www.w3schools.com/cssref/css3_pr_background.asp Hope this helps. William

William, I tried adding body {background-image:url("eye.png"); background-repeat:no-repeat} but the same problem but this time the width AND height of the png is about 2/3 the size. If I take out the no-repeat, though, the png repeats enough to fill out the screen. I can't have it repeat though. Don't understand since again the png is at the same pixel dimensions as the screen and in photoshop I put in ppi of 326 which is what I think the iphone 5's is. Any ideas as to what's wrong and if not, is there a way via css to stretch the png to fill in the screen?Thanks. Steve

I see you have a solution in another post, but I also don't think you need a ppi of 326. This seems very large to me, greater than some print resolutions I've used. Also, this background image is probably a very large file size. Try using 72 (standard ppi for the web) with your previous efforts and your problem may disappear because the problem may be related to the quirk I found here: http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk It seems to cover all the parameters in your problem. William

William, no that didn't do it I'm afraid. The image still takes up only about 2/3 of the screen and has poor quality too now that it's only 72 ppi. The best I've been able to do is make the image the background in the screen properties of BT.