Background image looks different on mobile device than on mobile preview in PC browser

Question

I have a background picture of some random apartment for my website and it looks good on PC and on mobile preview on PC(using Firefox Developer Edition). But when I open it on my iPhone 7 it does not look good, it just shows top left corner of an image.

This is how it looks on my PC:

And this is how it looks on my iPhone 7:

This is css for div that has that background image:

#home {
    background: url("../images/seaview/mainpic1.jpg") no-repeat center center fixed;
    display: table;
    height: 100vh;
    position: relative;
    width: 100%;
    background-size: cover;
    text-align: center;
}

Did you set your viewport? https://www.w3schools.com/css/css_rwd_viewport.asp — Jens Ingels, Apr 22 '19 at 14:03
This might help you: https://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im — Julian Espinosa, Apr 22 '19 at 15:00

score -1 · Answer 1 · answered Apr 22 '19 at 14:13

-1

Looks like you are missing a value for background-size and leaving it up to the browser. Just add cover to your CSS rule for the background image:

background: url("../images/seaview/mainpic1.jpg") no-repeat center center cover;

Resource: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

answered Apr 22 '19 at 14:13

BugsArePeopleToo

2,976
1
15
16

background-size: cover; is set – mememanyes Apr 22 '19 at 14:35
Sorry I missed that! – BugsArePeopleToo Apr 22 '19 at 14:35

Background image looks different on mobile device than on mobile preview in PC browser

1 Answers1