CODEWITHSUNDEEP
cssmobile
LeeTee
LeeTee

Reputation: 6601

CSS - background image display looks different on mobiles than when browser resized

I am using the Wordpress Zerif Lite template and am having issues with the background image display on mobiles. I spent time perfecting the position of the image so its looks good when the browser was resized to mobile size but when tested on a mobile it looks totally different. Why does it look different on a mobile? Can anyone help?

.header-content-wrap {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right top !important;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    padding: 285px 0 210px;
}

Please see the screen shots below:

mobiles:

**link removed as now resolved.

Resized web browser:

**link removed as now resolved.

Upvotes: 0

Views: 530

Answers (1)

jgraup
jgraup

Reputation: 1309

Check the background-position:. Looks like it's using right top but maybe you just want center. If it is different then you might be using media queries which is why they could have different positions based on screen width.

UPDATE

The image is applied to the body as a background. On the iPhone6 the background ends up being 375px x 11267px. It looks funny because you're zooming based on an exaggerated vertical using background:cover. If you want to fix the problem you'll need to hide that background image when your screen ratio gets crazy like that. I understand you're doing that because you want a fixed position but attaching to the body isn't helping. You could make a fixed position div that is 100% the viewport width and height for the same effect in the background.

Upvotes: 3

Related Questions