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:

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:

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.
28 Responses to Firefox 3 CSS handling bug: blurred background image with no-repeat + positioning
j4s0n
July 1st, 2008 at 7:26 am
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.
Dennison Uy - Graphic Designer
July 1st, 2008 at 12:29 pm
Hmmm, interesting … why they would apply anti aliasing to an image is beyond me.
New Blu Ray
July 6th, 2008 at 2:44 pm
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.
» Firefox 3: the CSS bugs - sugarenia.com : Web Standards, Accessibility & other Girly Stuff
July 8th, 2008 at 3:28 am
[...] 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. [...]
Doug Avery
July 9th, 2008 at 7:54 pm
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!
Michael
July 10th, 2008 at 11:17 pm
How about positioning background 50% 50%?
Removing no-repeat didn’t seem to help there…
Rajesh
July 16th, 2008 at 4:53 pm
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
…………
Dennison Uy - Graphic Designer
July 18th, 2008 at 10:53 pm
Hi Rajesh,
Interesting. I am unable to replicate the problem. Maybe you can post the complete code?
Cynthia
July 22nd, 2008 at 10:28 pm
Thanks! really helped me with your post
Michiel
July 24th, 2008 at 4:08 am
@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
freight88
July 30th, 2008 at 10:13 pm
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……
Paul Bradshaw
August 6th, 2008 at 3:36 am
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
Dennison Uy - Graphic Designer
August 11th, 2008 at 2:41 pm
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.
me
August 15th, 2008 at 11:55 pm
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.
Ian
August 19th, 2008 at 11:16 pm
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.
Nat
August 25th, 2008 at 2:43 pm
Amazing. I’ll subscribe on your RSS. How long did you write it??
sheri
September 9th, 2008 at 6:08 am
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.
Pimpmaster
September 16th, 2008 at 5:07 pm
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!!
bart
September 16th, 2008 at 10:01 pm
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?
Vlad
October 23rd, 2008 at 2:51 am
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!
Jenaya
January 19th, 2009 at 5:34 pm
i tried what the guy below me said. ctrl+0 really does work. cool.
. thanks
Uwe
March 29th, 2009 at 10:45 pm
Thanks for sharing this!
Mauricio
May 14th, 2009 at 8:33 pm
Thank you very much – I could not find the reason for this strange blurred backgrownd in Firefox.
I don’t think going back to FF2 is a good solution
After fixing, the zoom does not cause a problem for me.
I had a absolute position for the BG image with only width and height and overflow (but not repeat or no-repeat)
position: absolute;
height: 119px;
width: 635px;
background-image: url(/current/css/head2.jpg);
overflow: visible;
Added the no-repeat and is working now!
>> Note that I had to add the full background-repeat: no-repeat;
position: absolute;
height: 119px;
width: 635px;
background-image: url(/current/css/head2.jpg);
overflow: visible;
background-repeat: no-repeat;
none
August 1st, 2009 at 4:18 am
the ctrl + 0 worked for me to! thanks
Stability
August 11th, 2009 at 10:26 pm
ohh thank you soo much.
CTRL + 0 worked 4 me 2 ohh
Freight88
August 27th, 2009 at 11:59 pm
Hopefully their release I got today will be much better.
Mister Vee
October 18th, 2009 at 4:59 am
Hey;
I use Css to create a button rollover effect. Both button states ( normal and hover) are both in one image file. So , on hover the background image just shifts over to reveal the other state. And so that the spiders find the link I indent a text link at -9999px to hide it.
Here check out what I mean:
Css file:
.rollRAQ {
display:block;
width:143px;
height:27px;
background:url(../img/buttonsRAQ.jpg) no-repeat;
text-indent:-9999px;
}
and the hover state:
a.rollRAQ:hover {
background-position:-143px 0;
}
Html link:
Add to Quote List
I tried removing the no-repeat, but no luck.
Still blurs and even stretches.
Hope they fix that bug soon, cuz I’m gunna have to have to change a hell of a lot of button on many sites !
ugh !
Works fine in all other browsers, just not FF3.
Mister Vee
October 18th, 2009 at 5:02 am
Darn the link didn’t come out right here it is so it doesn’t appear as a real link:
a href=’request_quote_form.php’ class=’rollRAQsml’>Add to Quote List a
I use PHP to generate this link so that’s why it has single quotes instead of double.