1

Hey I'm using Dropkick js on my website, but for some reason the body background image is affected and become buggy. The background is a large image that is fixed and its position is set to "cover".

body {
    background:url('IMAGEURL');
    background-attachment:fixed;
    background-size:cover;
}

Here is an example: http://jsfiddle.net/NR9L2/1/

When you scroll down, the image does not appear fixed, and when you are scrolled down and activate the dropdown menu the image appears to "correct" its position.

I am using Google Chrome on a PC.

mikehobi
  • 116
  • 1
  • 6

1 Answers1

0

I recently ran into the same problem. It only happens in Chrome so I'm guessing it's a Chrome bug. You are right - it's the background-size:cover; with combination of background-attachment:fixed; that messes it up. Using a fixed div as bg with no attachment doesn't help either.

The way I resolved it was by using one of the following plugins:

http://www.inwebson.com/jquery/fullscreen-background-jquery-plugins/

The down side is it uses jQuery to resize not CSS3.

Miro
  • 8,402
  • 3
  • 34
  • 72
  • Thank you. It also seems that Firefox is a bit buggy as well. Any recommendation for those plugins? – mikehobi May 09 '13 at 22:19
  • The easiest and lightest one is [Full Size Bg](http://bavotasan.com/download-manager.php?id=25) - 1KB (minified) To load it: $("#background").fullBg(); You could use [Supersized](http://buildinternet.com/project/supersized/) if you want a slideshow. – Miro May 09 '13 at 23:18