Question

I used “320andup” in order to make my first real responsive website. I managed to have a perfect adaptive environment except only one thing. The background image in Chrome and Safari is pushed down 18px. I can’t explain why. Only thing I know is that when i add in the body tag “background-attachment: fixed;” the problem is solved but when I scroll I get an ugly experience that I don’t want to have. I also tried this

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    body {
    background-image: url(../img/chrome-safari-img.gif);
    }
}

with IE to completely break.

Firefox, Opera and IE8 are ok. Only problem is Chrome and Safari.

You can see exactly whats the problem and investigate the code in my localhost website -> http://www.demo.lollypop.gr/ffloor

I would like to avoid detecting chrome with PHP.

Answer 1

Just add position:absolute; in your body tag.