I just created a lockscreen theme for my iPhone. It works, but for some reason I cannot remove the black background space of the body, i.e. resize the body along the right and bottom edge of the lockscreen.
I created a short slideshow so you get the.. indeed.
Here's the relevant HTML and complete CSS code. Note that I added many unnecessary '0px' properties just to see if they'd make a difference:
<body>
<div id="background">
<img src="LockBackground.jpg" width="320" height="480">
</div>
<div id="labels">
<div id="clock">//e.g. 6:12 AM
</div>
<div id="day">//e.g. Sunday
</div>
<div id="date">//e.g. 5 Aug
</div>
</div>
</body>
CSS:
*{ margin: 0px; padding: 0px; border: 0px; }
body { background-color: #000; border: 0px; margin: 0px; padding: 0px; position: absolute; font-family: Helvetica Neue; font-size: 50px; color: #fff; width: 320px; }
img { border: 0px; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 320px; z-index: 0; }
#labels { position: absolute; width: 290px; top: 50%; margin: -0.7em 0 0 30px; }
#day { line-height: 0.8; }
#date { position: absolute; margin-top: 18px; line-height: 0.6; }
Surely you just need body {width:100%; height:100%;}
.
It may be more complex than this, but I can't think why it would be.
You could also try img {width:100%; height:100%;}
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With