CODEWITHSUNDEEP
iphonecssbackground
Greg
Greg

Reputation: 567

Background image on iphone is not diplaying properly

I have a background image that displays as it should on the computer but for some reason it's become too small (like half the size it should be when viewing it on my iphone. Something has caused this to happen as I've been working on the page because this wasn't the case earlier today.

this is the css for the div containing the bg img. Any ideas on whats going on?

#wrapper{
    position:relative;
    width:1000px;
    height:5854px;
    background-image:url(../images/UnearthingBG.jpg);
    background-color:#000;
    margin-top: 75px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-repeat: no-repeat;
    }

This is the working page http://www.unearthingfilm.com/Test.html

Upvotes: 1

Views: 1147

Answers (3)

Greg
Greg

Reputation: 567

I managed to fix it last night using background-size: cover.

Thank you for your answers. Much appreciated

Upvotes: 1

Linus Caldwell
Linus Caldwell

Reputation: 11058

I got it to work on my iPhone 3GS with setting the background-size:

#wrapper {
    -webkit-background-size: 1000px 5854px;
}

This is hacky, but did the job here. I should tell, my iPhone is just for playing sudoku and didn't get any update for years, so it runs iOS 3. ;)

Here may be the reason: http://medialab.zendesk.com/entries/22472177-Large-image-as-browser-background-not-working-on-iPhone-Safari-browser

Your problem is caused by mobile safari. It simply shrinks down all images that are larger than 2Mpx.

Don't know if it's true, but it makes sense.

Upvotes: 0

dev
dev

Reputation: 4009

I've just tested your site out on my iPhone and the background image looks to appear fine. I've added a screenshot blow. It's possible that your iPhone has had an error and is cache a file somewhere.

I suggest possible try going to * Settings -> Safari -> Clear Cookies and Data *

enter image description here

Upvotes: 0

Related Questions