View Full Version : css background image flickers

05-19-2009, 03:12 PM
I'm having a strange issue where my background pattern flickers when scrolling the page. example: http://www.remixwars.com/temp/

is there anyway to fix this?

05-19-2009, 04:02 PM
Hello angst,
I didn't try it but I would imagine a well formed document would perform better than your incomplete code. Run that through the validator and fix the errors, then see what it does.

Links about validating in my sig below.


05-19-2009, 04:07 PM
I've tried this in a complete doc with the exact same result, I just put this together really quick as an example for ppl to view.

edit: there we go, 100% valid according to your links, and still the exact same thing: http://www.remixwars.com/temp/

05-19-2009, 04:46 PM
Just as quick to make a valid presentation. Especially since that's the first thing anyone on this forum is going to suggest.

Seems like a known IE bug? http://tetlaw.id.au/view/blog/flickering-css-background-images-in-ie6/
The suggested fix is increasing the size of your background image to 50px square. When you increase the size of your bg.jpg you can see it's got shaded corners so you can't really tell if the larger image fixes the flicker.

I replaced your image with a solid color image for testing and you there doesn't seem to be a difference between a 2px square or 50px square.

Then I made this in PS using your 2px bg.jpg ... but it still flickers.

05-19-2009, 05:43 PM
yah, this is odd, it happens on all browsers that i've tested so far.

05-19-2009, 05:56 PM
I don't see any such flickering issues.

05-19-2009, 05:58 PM
what browser are you using?

I've checked on FF & IE

05-19-2009, 06:38 PM
I see it in FF3 and IE6. This may not be entirely correct, but I believe it's because of the style of your background.

A scroll is 3 pixels high, so what is happening is that when you scroll the page, you're swapping the black with the orange pixels.

Change it so that it is uniform every 3 pixels.

Like this for example:

Okay, that's really hard to see, but if you click on it, you'll see that it's a 3 pixel high image.