CODEWITHSUNDEEP
imagecssbackground
Interactive
Interactive

Reputation: 1550

background image is blown up on mobile device

I have created a parallax page. On my desktop everything works great but if I view it on a mobile device the image is blown up so far I can literally count the pixels.

I have no idea what causes this. Even so I have no idea how to fix this....

I don't even know where to start besides Google. I found one topic where somebody states that this is a Safari issue.

Anyone?

I can't really create a JSFiddle or something because, like you stated, it's made in WordPress.

However please see the attached images. Maybe somebody can see at least where the problem lies and maybe tell me what causes this (global indication)
Desktop:
Desktop version

Mobile (iPhone)
iPhone

Upvotes: 1

Views: 1054

Answers (2)

Eggib
Eggib

Reputation: 38

Have you tried to add:

<meta name="viewport" content="initial-scale=1.0">

to head of your HTML? Or if that is not enough, try:

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

It tells the mobile browser to use device width and to use full initial zoom level.

Upvotes: 0

Sean D
Sean D

Reputation: 156

You might want to try swapping background-size:cover to background-size:contain. This will ensure the background image fits both its width and height within the window, but could create some blank space. With 'cover', the whole area is guaranteed to be filled, but the image might not be entirely contained which seems to be what's happening now.

Upvotes: 2

Related Questions