1. KaleXD's Avatar
    I made an html lockscreen, and designed it to take advantage of the new 640x960 pixel screen, but when I applied it, the background image I chose was stretched, doubled in size, and you could only see the top left 320x480 pixels. The rest of the elements were stretched and if it was supposed to be in the middle, it would be half cut off, in on the right.

    I'm thinking winterboard needs an update. Anyone else have this problem?
    2010-08-18 10:39 PM
  2. Imrac's Avatar
    Yes Winterboard renders HTML using the old 320x480 resolution. The way I got around this was to theme the elements for 320x480 and for the background I found a neat little CSS trick. That way it will shrink down the background, and it still seems to be HD and not cutting any pixels out =).

    Code:
    	background-image:url("Background.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    I attached 2 images. One of my lockscreen totally unthemed using Apples way to apply the wallpaper, and my html wallpaper on a page.
    Attached Thumbnails iPhone 4 HTML lockscreens-img_0052-1-.png   iPhone 4 HTML lockscreens-img_0053-1-.png  
    Last edited by Imrac; 2010-08-19 at 10:27 AM.
    2010-08-19 10:20 AM
  3. KaleXD's Avatar
    Thanks a lot!
    2010-08-20 07:56 PM
  4. stevesin's Avatar
    Yes Winterboard renders HTML using the old 320x480 resolution. The way I got around this was to theme the elements for 320x480 and for the background I found a neat little CSS trick. That way it will shrink down the background, and it still seems to be HD and not cutting any pixels out =).

    Code:
    	background-image:url("Background.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    I attached 2 images. One of my lockscreen totally unthemed using Apples way to apply the wallpaper, and my html wallpaper on a page.

    Where would you put the CSS code? Sorry, i'm a noob at this. Been trying to get the wallpaper to work with Lockscreen WN
    2010-08-26 08:08 PM
  5. Imrac's Avatar
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wallpaper.html/Lockscreen.html</title>
    <style type="text/css">
    body {
    	background-image:url("Wallpaper.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    	margin:0;
    	padding:0;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    html document, name it either Lockscreen.html or Wallpaper.html

    Then add your Wallpaper.png to the same directory. These should both go in Library/Themes/xxxxxx.theme folder.
    2010-08-26 08:15 PM
  6. evilshade's Avatar
    Yes Winterboard renders HTML using the old 320x480 resolution. The way I got around this was to theme the elements for 320x480 and for the background I found a neat little CSS trick. That way it will shrink down the background, and it still seems to be HD and not cutting any pixels out =).

    Code:
    	background-image:url("Background.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    I attached 2 images. One of my lockscreen totally unthemed using Apples way to apply the wallpaper, and my html wallpaper on a page.

    This worked perfectly for me. I loved the weather theme I created, but I was disappointed I couldn't get a background to work with Retina's resolution. This worked very nicely.

    Calling one of the standard/seeded images works too.

    background-image:url("/private/var/stash/Wallpaper/iPhone/[email protected]");

    Thanks a bunch for a great workaround!
    2010-08-28 06:09 PM
  7. rest_easy's Avatar
    or you can make a link called [email protected] and have it link to /var/mobile/Library/SpringBoard/HomeBackground.jpg

    that is the background You choose from the photos app. So you can change it to whatever you like (but that will require a respring to apply until winterboard updates or someone figures out why that is)
    2010-08-30 05:08 PM
  8. Imrac's Avatar
    Very awesome! Was hunting for that location =).
    2010-08-30 08:43 PM
  9. bignighttrain's Avatar
    Can you get HTML images in stock folder background.
    2010-09-11 03:55 AM
  10. nekotron's Avatar
    Is there a variant of this that also works for the SMSBackground.png? I tried naming it SMSBackground.html, but it does nothing. The image is still enlarged and pixelated. Did I do something wrong? Though, the Wallpaper.html document worked like a charm.
    2010-09-14 12:44 AM
  11. christopherjason's Avatar
    is there any way to do this to the status bar cause my Wifi bars are the same size as the Stock ones but they are Way bigger on the phone.
    2010-09-14 01:58 PM
  12. nekotron's Avatar
    If there is no way to get retina display resolution on the SMS background is there a way to change the file resolution of a file on the phone? I've been searching for an application that can see outside of the photo album and can't find one that can resize to the non-retina display (320x480) resolution.
    2010-09-21 06:43 PM
  13. sadeed86's Avatar
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wallpaper.html/Lockscreen.html</title>
    <style type="text/css">
    body {
    	background-image:url("Wallpaper.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    	margin:0;
    	padding:0;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    html document, name it either Lockscreen.html or Wallpaper.html

    Then add your Wallpaper.png to the same directory. These should both go in Library/Themes/xxxxxx.theme folder.
    How to insert other theme codings into the Lockscreen.html?... for example i want to combine the Live Animated Weather with other theme for my lockscreen... I hv both important files, both of the Private folders and both of the lockscreen.html... I just dont know how to insert other theme codings into the other so that both of the theme will combined and executed simultaniously on the lockscreen...

    My themes which i want to combine is: LS Inspired lockscreen theme will function as the widget and the lockscreen background... And the 2nd theme is the UniAWv3 which is the live weather will be animating at the background of the lockscreen...
    2011-07-29 09:38 AM
  14. consultant1027's Avatar
    Two years later.... Is Winterboard still incapable of displaying 640x960 Lockscreen Background via HTML?!?!
    2012-09-06 10:57 PM
  15. declanland's Avatar
    Two years later.... Is Winterboard still incapable of displaying 640x960 Lockscreen Background via HTML?!?!
    Yes, just add:

    <style>
    body {
    background-image:url("Background.png");
    background-size: 320px 480px;
    background-repeat:no-repeat;
    }
    </style>

    into the header section of your HTML file. Just call it after you close the head (</head>). I'm not sure if Saurik has recently updated anything with Winterboard in terms of html changes. The CSS above is how I overcome the issue though.
    2014-01-20 10:45 AM
LINK TO POST COPIED TO CLIPBOARD