CODEWITHSUNDEEP
cssfirefoxbackgroundbackground-image
b_benjamin
b_benjamin

Reputation: 254

Firefox background-image bug

My Firefox is acting weird. I use a simple 4x4px transparent PNG for a div background (as usual). In Chrome, Safari, Opera and even IE it looks great but in FF it's "broken". Here is a picture to show you what I'm talking about: http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G.

I use image and gradient for the background but if I only used the image, it causes the same result.

Here is the code:

#wrap {
  background-color: #f5f5f5;
  background-image: url(../images/general/bg-wrap.png);
  background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb));
  background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb');
  background-position: 0 0; background-repeat: repeat;
}

When I used only the background-image, it looked like this:

#wrap {
   background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat;
}

And this is the bg-wrap.png: http://cl.ly/0i3i1R0P2R0i1K1h1V1P. I don't understand what's going on...

Upvotes: 2

Views: 2228

Answers (4)

gruntPi9
gruntPi9

Reputation: 211

Everyone's right about the Firefox bug and background image tile dimensions -- I was having the identical problem with a tile that was 16p x 16px. Nealio's answer seems to be correct, but it's not a question of resolution. Rather, take your tile and literally duplicate it so it repeats itself horizontally and vertically, and then use that tile as your background image.

For example, my background image is a simple tile of a very small "checkerboard" with alternating gray and white squares. The first image was the bare minimum to tile the pattern infinitely, so each "checker" measured 8px x 8px, resulting in a background image of 16px x 16px. This looks fine everywhere except Firefox, where it displays the same zig zaggy jaggy rendering as yours did.

After reading Nealio's response, I took that first pattern tile and doubled it so that it was 4 checkers x 4 checkers (8px X 4 = 32).

And voila! Same background appearance, but just a slightly larger tile.

Upvotes: 4

Markus Zeller
Markus Zeller

Reputation: 9145

You should not seperate the mozilla and webkit features with a comma after the closing bracket. Also the image path should be encapsuled within quotes.

I had the problem, that the image was not displayed, but could be viewed with in FireBug. The reason was the adblock plus extension. After disabling for that page (or general) it was displayed, again.

Upvotes: 0

nealio82
nealio82

Reputation: 2633

The only thing I can think of is that a number of years ago, early versions of Firefox had trouble repeating background images that were too small (less than about 16x16).

Perhaps this is a new incarnation of that bug when combined with a gradient fill css..?

Just rule this out by testing it with a larger background image.

Upvotes: 3

will
will

Reputation: 4575

That is weird...

I set up a fiddle, and it works fine like this: http://jsfiddle.net/will/KMVvT/

Do you think it could be something else interfering?

Upvotes: 1

Related Questions