1. KingRedmer's Avatar
    Hi, I've been playing around with this theme for quite awhile now, and since getting my iphone 4 it hasnt worked right. I'm no expert at HTML, but wondered what I could do to fix this, or if someone out there could tell me what I needed to add to get it to work.

    I have an HTML clock image with a transparent background, that I want to call whatever image is set through settings to be the background. When I do I get a really zoomed in background. I know its because my html is written for a non-retina device, but I dont know what to do to fix it.

    Please help. Attached are a wallpaper, an image of how my html renders it, and my theme.
    Attached Thumbnails HTML Lockscreen help-photo-1-1-.jpg   HTML Lockscreen help-photo-2-1-.png  
    Attached Files
    2011-01-11 11:06 PM
  2. KingRedmer's Avatar
    Bump

    I'm surprised at the lack of responses. Any suggestions would be appreciated.
    2011-01-14 07:43 PM
  3. dude jacobson's Avatar
    im very curious about this issue, my attempt to solve it is at the link below, ive never worked with retina devices so it may do nothing please keep me informed as to the actual solution (if one is found).

    MEGAUPLOAD - The leading online storage and file delivery service
    2011-01-15 04:53 AM
  4. KingRedmer's Avatar
    Sorry I didn't respond right away. I appreciate your effort, but got the same results with your edited version. A friend of mine mentioned that I might need to do a CSS overlay using the clock.png. Any ideas what that means?
    2011-01-17 05:16 PM
  5. rocky5's Avatar
    Here is how you fix your problem.

    this will display the iPhone background only on firmwares 4.1 and bellow (4.2.1 you cant do it)

    Code:
    <html><head>
    <style>
    #Layer{width: 322px; height: 482px; position: absolute; top: -1px; right: 0px; down: 0px; left: -1px;}
    .stretch {width:100%; height:100%;}
    </style>
    <body>
    <table><td><div id="Layer"><img src="/private/var/mobile/Library/SpringBoard/HomeBackground.jpg" class="stretch"/></div></table></td>
    </body></html>
    Apple are Control freaks we need to stop them before they take over the world!!
    2011-01-21 09:50 PM
  6. KingRedmer's Avatar
    Thank you for replying. I run into the problem of not knowing how to integrate that code into my existing HTML code. Just pasting it in there leaves me a blank screen. Where should this go in my LockBackground.html file?
    2011-01-21 11:17 PM
  7. Schnedi's Avatar
    try this, this should fix it

    replace the image Wall.png for the one you want to show

    if you wanna display an image from your camera roll

    search this

    <div id="Layer"><img src="Wall.png" class="stretch"/></div>

    and replace with this

    <div id="Layer"><img src="/var/mobile/Library/SpringBoard/LockBackground.jpg" class="stretch"/></div>
    2011-01-23 12:57 AM
  8. KingRedmer's Avatar
    Thank you so much! This is almost exactly what I wanted. Only downside is the clock isn't positioned correct. Can I adjust it based on the old lockscreen.html or will the whole "stretch" thing mess that up?
    Again, great work and thanks soo much!
    Attached Thumbnails HTML Lockscreen help-imageuploadedbymodmyi.jpg  
    2011-01-23 01:25 AM
  9. Schnedi's Avatar
    its easy .... open the HTML and replace yours with these lines


    Code:
    <style> 
    
    
    #Layer{width: 320px; height: 480px; position: absolute; top: 0px; right: 0px; down: 0px; left: 0px;} 
    #Layer1{width: 320px; height: 480px; position: absolute; top: 30px; right: 0px; down: 0px; left: 0px;} 
    
    .stretch {width:100%; height:100%;} 
    
    
    </style>
    
    <body> 
    
    <table><td> 
    
    
    <div id="Layer"><img src="Wall.png" class="stretch"/></div> 
    <div id="Layer1"><img src="Clock.png" class="stretch"/></div> 
    
    <style>


    if t Clock.png its not aligned still ... search this line and change the red value


    #Layer1{width: 320px; height: 480px; position: absolute; top: 30px; right: 0px; down: 0px; left: 0px;}


    -------------
    2011-01-23 01:43 PM
  10. KingRedmer's Avatar
    Thanks again for your reply. Am I right in saying that these changes adjust the layer with the gray bar on it? Because using your changes end up with the clock still offset, just higher (see pic). I wonder does the position of the actual clock need to change, and not just the background?
    Attached Thumbnails HTML Lockscreen help-imageuploadedbymodmyi.jpg  
    2011-01-23 05:56 PM
  11. KingRedmer's Avatar
    Ok I think I have it figured. I had to add left: 0px to the clock and date as well as adjust their top positions. Thanks again for all your help. When I'm at a computer later I can upload the whole theme now that it's adjusted.
    Attached Thumbnails HTML Lockscreen help-imageuploadedbymodmyi.jpg  
    2011-01-23 07:23 PM
LINK TO POST COPIED TO CLIPBOARD