0

When viewing my site from a IOS device the background image is not showing correctly. It works flawlessy on other devices such as Android, PC and MAC web browsers.

I have set these CSS elements which came with the bootstrap template and tried different combinations:

#header {
background-image:url(../img/HS_16.jpg);
-webkit-background-size:;
-moz-background-size:cover;
-o-background-size:;
background-size:cover;
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;
position:relative;
min-height: 512px; 
}

A bit hard to explain but if you go to http://holistiskasystrar.se from an IOS device and compare it to any other device, you see what i mean.

Click her for example, Left is iPhone, right is chrome

user8855
  • 29
  • 3
  • You'll probably get more answers to your question if you post images of what you're seeing on these different browsers. Just linking to an external website isn't very helpful. – TrampolineTales Nov 18 '16 at 16:23

1 Answers1

0

iOS Safari is know to have buggy behaviour with background-size: cover; and background-attachment: fixed;

It is listed under the "Known Issues" Tab here: http://caniuse.com/#search=background-size

But there are a bunch of workarounds online, for example CSS background-size: cover replacement for Mobile Safari

Community
  • 1
  • 1
johnrackles
  • 1
  • 2