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.