CSS Background Image Disappearing in Chrome

CSS background image disappearing in Chrome

I don't know if this is the same issue, but the root is probably the same: http://code.google.com/p/chromium/issues/detail?id=111218. Based on that report, I don't think there's a known fix yet.

Background-image suddenly disappears on certain screen sizes on Chrome

I don't see anything wrong with your code. It looks like this might be the same issue you are seeing here as I can't seem to load your spritesheet on it's own in Firefox

It might be worth cutting your sprite sheet down and testing if that works.

hope that helps!

edit:

Looking at your live site you have a more traditionally shaped stylesheet which doesn't go beyond 1000 pixels in ether dimension. It looks like the one you are using on staging goes beyond 80,000 pixels which looks to be where your issue is.

Increasing the background-size in CSS makes the background image disappear

Solution #1: (Thanks to the comment of Temani Afif)

Should use 100% instead of auto in the background-size property for value of y:

background-size: 63px 100%;

Solution #2:

I came up to this idea thanks to vishwaovi answer.

We can use a background image that is a line of 1 x 31 pixels (or other fixed height) instead of just single pixel.

Then we can set the background-size with fixed height for the y:

background-size: 63px 31px;

And the background-repeat property needs to be set to no-repeat:

background-repeat: no-repeat;

This one works too for me but obviously the first solution with just setting the value for y to 100% is more simple.

---

Related Topics