CODEWITHSUNDEEP
htmlcssfirefox
Dominic P
Dominic P

Reputation: 2404

Firefox background-attachment: fixed Nightmare

I have been pulling my hair out on this one all day, and I'm hoping someone smarter than me can figure it out.

I'm working on a new design for my site, and I've run into what appears to be a Firefox bug. I am using background-attachment: fixed for a gradient on the <body> element and then I have a full width <div> with another background image at the top of the page. Only in Firefox, there is a small white border at the top of the page and on either side of the <div> background.

I've tried at least a half-dozen different ways of coding the HTML and CSS, and they all produce the same results. Also, the white gap doesn't appear to be there in earlier versions of Firefox (I noticed it in version 6). I even did a clean reinstall of Firefox without any add-ons, and I'm still seeing it. Any ideas on what's causing this? Is my code wrong in some way?

See simplified test case here: http://mygemologist.com/bg-fixed-test.html

Note: This question may be related to: Crazy CSS Issue in Firefox Only - position fixed and background color, but I'm not sure on that.

Upvotes: 2

Views: 4148

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

Dominic, see https://bugzilla.mozilla.org/show_bug.cgi?id=677095 for this issue and https://bugzilla.mozilla.org/show_bug.cgi?id=677095#c47 for a possible workaround.

Upvotes: 2

Ben
Ben

Reputation: 13615

Maybe use a smaller width image? It seems firefox has issues rendering it, when zooming it goes from properly displayed to having a 1-2px white border above it.

EDIT

When I change the body css to background-position: scroll the problem seems to go away

body {
  background: url("http://www.mygemologist.com/resources/bg-gradient.jpg") repeat-x scroll left top transparent;
}

Upvotes: 0

Related Questions