iPhone 4 HTML lockscreens

**KaleXD** · 08-18-2010, 02:39 PM

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?

**Imrac** · 08-19-2010, 02:20 AM

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.

**KaleXD** · 08-20-2010, 11:56 AM

Thanks a lot!

**stevesin** · 08-26-2010, 12:08 PM

Originally Posted by Imrac

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

**Imrac** · 08-26-2010, 12:15 PM

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.

**evilshade** · 08-28-2010, 10:09 AM

Originally Posted by Imrac

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!

**rest_easy** · 08-30-2010, 09:08 AM

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)

**Imrac** · 08-30-2010, 12:43 PM

Very awesome! Was hunting for that location =).

**bignighttrain** · 09-10-2010, 07:55 PM

Can you get HTML images in stock folder background.

**nekotron** · 09-13-2010, 04:44 PM

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.

**christopherjason** · 09-14-2010, 05:58 AM

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.

**nekotron** · 09-21-2010, 10:43 AM

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.

**sadeed86** · 07-29-2011, 01:38 AM

Originally Posted by Imrac

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...

Thread: iPhone 4 HTML lockscreens

LinkBack

Thread Tools

Display

iPhone 4 HTML lockscreens

The Following 2 Users Say Thank You to Imrac For This Useful Post:

The Following User Says Thank You to Imrac For This Useful Post:

The Following User Says Thank You to rest_easy For This Useful Post:

How to insert other theme css code into Lockscreen.html?

Posting Permissions