[Solved] Backgroundimage dissapears on Iphone

[Thomasmorel]

My website

My backgroundimage dissapears on the Iphone (it’s visible on every browser on the computer).

Thereby. The image is not fullscreen on every browser. This is the code I used:

<style type=”text/css”>
html {
background: url(http://i1230.photobucket.com/albums/ee487/thomasmorel/homeafbeelding.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

[marksweb]

This might not be much help, but it works fine on my iPad and Apple say that Safari on iOS uses the same webkit engine as the desktop so in theory you shouldn’t have a problem.

My first suggestion would be to store the image on your server and reference that locally as it could be a timeout type error where it’s not loading the image in time.

Also, you might find this documentation helpful if you’re looking at iOS; https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1

[Senff]

I believe iPhone doesn’t support the “fixed” property for backgrounds, so that’s maybe the root of the issue?

[dfogge]

position:fixed is not supported on pre-ios5 devices.

[Thomasmorel]

Ok. SO i might leave the fixed out. Let’s see what
happens

[Thomasmorel]

Ok. This is what happens website. The photo is visible on Iphone, but it’s not fullscreen anymore.

[Thomasmorel]

Is there a code without the ‘position: fixed’ (cause this indeed is the problem for visibility on Iphone) I can use to always have my background image fullscreen?

[dfogge]

whoa just realized your bg image is over 1mb. you should definitely try to bring that down a bit.

[Senff]

iOS + background image manipulation = no happy marriage

I would suggest to use an older method, like two (absolute positioned) layers.
One has the same width and height as the viewport and contains the image
The other one (on top of the first one) has your content.

OR

You just forget about it and make it different (= simpler) for iOS devices. ;)

[Thomasmorel]

@dfogge. Roger that. I will do this in Photshop

@Senff. I’m not following you…

[chrisburton]

What about javascript?

[Bogdan Dimitrov]

Hi Tomasmorel,
I’m not so advanced like guys here, but always try to help if can.
I just made some tests. You can try this code:
html {
background: url(“http://i1230.photobucket.com/albums/ee487/thomasmorel/homeafbeelding.png&#8221;) no-repeat fixed center center transparent;
-webkit-background-size: 1920px 960px;
-moz-background-size: cover;
background-size: cover;
}

I tested it under Mozila, Opera, Chrome, Safari /all for Windows/, and in Device Central for profile Apple iPhone 4 /640 x 960/ – it works
It doesn’t work under IE 8.

Also take a look at this publication http://www.alistapart.com/articles/supersize-that-background-please/

Regards

[cmckay]

I had an negative text-indent that was throwing my background image off the page, so color:Transparent it is then.

[Author]

Posts