CODEWITHSUNDEEP
iphonehtmlcssmobilebackground-image
Mike
Mike

Reputation: 49

CSS background not showing up on mobile

I am having trouble with my background image not showing up correctly when viewing the site on a mobile device specifically an iPhone. I can see it there its just not in the right place. I have attached a link to the image showing how the background is rendering and a link to the site.

If anyone has an answer to fix this issue I would really appreciate any advice.

Thanks in advance.

http://mikedemar.com/weightloss4youth/bgissue

http://mikedemar.com/weightloss4youth/index.html

Upvotes: 3

Views: 5911

Answers (3)

Mike
Mike

Reputation: 49

A friend of mine suggested that I remove the "width=device-width" and to set the background-size to 2560px 1440px. This is working perfectly. See link.

http://mikedemar.com/weightloss4youth/index.html

Upvotes: 1

user1512616
user1512616

Reputation: 509

Maybe try this:

html { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

You can see other methods at: http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 1

nooitaf
nooitaf

Reputation: 1468

try this

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Upvotes: 0

Related Questions