CODEWITHSUNDEEP
htmlcssgoogle-chromemobile
mpn
mpn

Reputation: 1018

Trying to get a large centered background image to work in mobile browser without being distorted

So i used the method in this article: http://css-tricks.com/perfect-full-page-background-image/

here's the code i have:

css:

#bg {
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
z-index: -1;
width: 100%;
}

@media only screen 
and (max-width : 1024px) {
#bg {
    left: 50%;
    margin-left: -512px;
}

html:

<img id="bg" src="breakfast.jpg">

this works for the most part except the height/width ratio in the mobile browser is messed up.

Upvotes: 0

Views: 140

Answers (3)

mpn
mpn

Reputation: 1018

Figured out the fix:

Needed to add 

html {
    height: 100%;
}

Upvotes: 0

mpn
mpn

Reputation: 1018

Going to answer my own question. In order for the background image to fill the page in mobile browser while maintaining the correct aspect ratio one must add a media query with a re-sized image for portrait / landscape mode.

Upvotes: 0

user2578173
user2578173

Reputation:

Edit you're media query like this:

@media only screen and (max-width : 1024px) {

#bg {
    left: 50%;
    margin-left: -512px;
    min-height: 1px;
    height: auto;
}

}

Upvotes: 1

Related Questions