Firefox 3 CSS handling bug: blurred background image with no-repeat + positioning

Author: Dennison Uy

27 Jun

I first noticed this bug in the first beta release of Firefox 3. Whenever I apply a CSS rule to an element in order to give it a background image, if I add the top or bottom positioning rule along with the no-repeat rule, I get a blurred version of that background image.

First look at the image in the example below, which appears blurry:

Firefox 3 blur bug with CSS no-repeat

CSS:
#containerMain { background: url(images/backgroundMain.jpg) top no-repeat; }

Compare the image above with the image below, which is what it should look like:

Firefox 3 blur bug without CSS no-repeat

CSS:
#containerMain { background: url(images/backgroundMain.jpg) top; }

Now notice that the only difference is the absence of the no-repeat rule.

Blurring does not occur if the no-repeat rule is by itself, or if I use the left and right rule, or if I specify the background image location in pixels. The following rules will not cause any blurring:

#containerMain { background: url(images/backgroundMain.jpg) no-repeat; }
#containerMain { background: url(images/backgroundMain.jpg) 10px no-repeat; }
#containerMain { background: url(images/backgroundMain.jpg) 5px 10px no-repeat; }
#containerMain { background: url(images/backgroundMain.jpg) left no-repeat; }
#containerMain { background: url(images/backgroundMain.jpg) top left no-repeat; }

In essence, the background blurring bug only appears whenever the no-repeat rule is used in conjunction with the top or bottom positioning rule. This is probably due to Firefox 3’s rendering engine attempting to center the image which it does so successfully but with a blurred image.

I did not care back when Firefox 3 was still in beta, but now that it is actually out of beta I can’t help but feel disappointed that this “bug” was left unfixed.

20 Responses for "Firefox 3 CSS handling bug: blurred background image with no-repeat + positioning"

Vlad October 23rd, 2008 at 2:51 am 1
Hi guys. I had the same problem and someone adviced mу to press Ctrl+0 to bring back the zoom to default value - it worked!
bart September 16th, 2008 at 10:01 pm 2
Has anyone noticed rendering issues with the th tag. I have a simple table with a few th’s running along the top of the table with corresponding rows of td’s below. The default rendering of the th’s should be bolded text centered over corresponding column. I get this in all browsers, but FF3. FF3 collapses the th’s to the width of the text. How do I fix this?
Pimpmaster September 16th, 2008 at 5:07 pm 3
I noticed this as well and its really starting to tick me off!

You also forgot to mention how agonizingly SLOWWWWW FF3 is (at least on a mac). I only use it for Firebug - if forced to use it for everyday browsing I would probably bash my head to a bloody pulp into my keyboard.

Firefox is supposed to set a higher standard, but this background glitch (combined with the complete inability to style file inputs) gives me bad IE flashbacks. Come on FireFolks - get your act together!!
sheri September 9th, 2008 at 6:08 am 4
Still, the same background image rendering problem persists! You look at the image through “view background image” and it renders correctly. In fact, any of my images are rendered very fuzzy, whether background or not. Terrible! If I could scroll-up on Google Chrome with my lap-top, that would be my browser of choice.
Nat August 25th, 2008 at 2:43 pm 5
Amazing. I’ll subscribe on your RSS. How long did you write it??
Ian August 19th, 2008 at 11:16 pm 6
I have the same problem with a backgrounds, especially on myspace and mine wont even display at all and I have tried all kinds of tricks. im still looking.
me August 15th, 2008 at 11:55 pm 7
I get the problem on myspace, its when you use the zoom function (ctrl + mouse scroll) if you do this once by accident even if you unzoom back to normal reseloution it will still be blurred, it gos back to normal but takes some time, your best bit is to re-install firefox..or downgrade to number 2.
Dennison Uy - Graphic Designer August 11th, 2008 at 2:41 pm 8
I have now removed Firefox 3 from my home computer and downgraded to Firefox 2 for a bunch of reasons, #1 of which is the way it respects the OS security setting. In fairness, this is probably the “right way” to do things, but it is something I do not appreciate, because Windows’ Internet Options was built for IE and it is something that I wanted to do away with that is why I use Firefox.

I still use Firefox 3 on my work computer though.
Paul Bradshaw August 6th, 2008 at 3:36 am 9
I’ve had the same problem, and no-repeat makes no difference. Can’t find any div width property either. Even tried embedding an image rather than as a background, and it’s still fuzzy.

Paul Bradshaw’s last blog post..Why investigative journalism needs to get networked
freight88 July 30th, 2008 at 10:13 pm 10
It seems that even without the no-repeat it blurs images. I actually will start using safari and IE from now on until it gets fixed.

Maybe the FF2 rollback is an option too……
Michiel July 24th, 2008 at 4:08 am 11
@Rajesh, maybe you mean Helvetica instead of Elvetica? Although that’s most likely not the problem.

Michiel’s last blog post..links for 2008-07-12
Cynthia July 22nd, 2008 at 10:28 pm 12
Thanks! really helped me with your post
Dennison Uy - Graphic Designer July 18th, 2008 at 10:53 pm 13
Hi Rajesh,

Interesting. I am unable to replicate the problem. Maybe you can post the complete code?
Rajesh July 16th, 2008 at 4:53 pm 14
Hi friends

here is another issue regarding firefox 3 rendering background images when it is applied to with position bottom.

look at my code:

BODY{margin:0px; padding:0px; font:14px Arial, elvetica, sans-serif; color:#949494; background:#f36dea url(../images/body_bg.gif) repeat-x left bottom;
}

FF2 renders it correctly. but in FF3 it doesn’t. It displays no bg image, only color, as if it doesn’t know where to end the body. Try it by adding a height to body.

but the most wondering(or distressing) fact is that, when I added a div with the following style,

DIV.test{
background:#ff0000 url(../images/body_bg.gif) repeat-x left bottom; width:200px; height:350px;
}

the rendering was so strange…check it yourself..

my code looks like this..

……….

sdef

…………
Michael July 10th, 2008 at 11:17 pm 15
How about positioning background 50% 50%?
Removing no-repeat didn’t seem to help there…
Doug Avery July 9th, 2008 at 7:54 pm 16
Thanks for catching this, it solved a baffling problem we were having. In our case, it seemed as if the background image was getting automatically resized to fit into the div (which was a little smaller than the image was, so blurring occurred). You might be able to test this by shifting the size of the element with the background image, and watching to see if it changes.

Either way, removing the no-repeat worked like a charm. Thanks!
» Firefox 3: the CSS bugs - sugarenia.com : Web Standards, Accessibility & other Girly Stuff July 8th, 2008 at 3:28 am 17
[…] The other bug is trickier: the new version of Firefox doesn’t seem to like background images. I admit I haven’t researched it much, but it’s a really annoying bug, as it blurs background images for no reason. Others have noticed as well. […]
New Blu Ray July 6th, 2008 at 2:44 pm 18
I have problems with firefox3 too. I have revert back to firefox2 for now, maybe until end of the year when things is settled, I will then install FF3 again. One thing I found is that, when using FF3, in hotmail, you can’t change the views of your email account.
Dennison Uy - Graphic Designer July 1st, 2008 at 12:29 pm 19
Hmmm, interesting … why they would apply anti aliasing to an image is beyond me.
j4s0n July 1st, 2008 at 7:26 am 20
I noticed FF3 is pretty good now in transparency, it might have been that fonts have alpha transparency applied on them too? that causes them to anti-alias. Does not notice that on the mac though.