[Solved] Absolute positioned background not working on mobile devices

[xam]

Hi,

Thanks in advance for you time, I’m experiencing a problem with the mobile view on this website I made: http://repairspot.nl/

If I resize my browser window on desktop if works perfectly, but when I view the website on my iPhone for example I see this: http://s10.postimg.org/ge3oixre1/IMG_5278.png

The full width section “Waar kunnen we u mee helpen?” has a before selector with the background image. CSS:

.Service.Overview {
position: relative;
z-index: 2;
}
.Service.Overview:before {
content: ”;
background: url(inc/img/service-bg.jpg) no-repeat center center;
background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
left: 50%;
width: 3000px;
margin-left: -1500px;
bottom: 0;
position: absolute;
z-index: -1;
display: block;
}

What can I do to fix this?

Kind regards,
Xam Hanegraaf

[xam]

Adding overflow:hidden; to the container sort of fixed it, but now the full width on desktop is gone ofcourse.

[Author]

Posts