CSS background image bug in Chrome

2
votes

I'm having a weird bug in Chrome, I'm applying the following CSS rule to an element:

#element {
  background-color: #0E0F10;
  background-image: url(images/the_background.jpg);
}

Now the first time I open a new page containing "#element", the background image isn't shown until I refresh the page cache with ctrl+f5.

I tried adding Pragma, Expires and Cache-control meta tags and it don't make any difference. The only way to make the image to be shown at the first time is to put the absolute url in this way: 

#element {
  background-color: #0E0F10;
  background-image: url(http://site.com/images/the_background.jpg);
}

Now the problem is that I can't hardcode a site url, I need to use a relative or relative to the root path.

Looking around I found a dirty trick for fixing a related bug in Chrome that coincidentally also fixs this problem: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

Basically when I open the page the first time, all the background images are reloaded through JavaScript and from here on it works fine.

However I would like to implement a more elegant fix or find the real cause of the problem.

I'll appreciate any advice.

5
cssgoogle-chrome
Where do you keep your css file? Is the same directory as the parent to your images director? if not try using url(../images/the_background.jpg) - Caelea
Just for the hell of it, could you see if it changes things to put the url in single quotes? - Adam Grant
The path to the image is fine, I also tried to put the path in quotes and no luck. If I open the Chrome developer toolbar, uncheck and check again (to disable-enable) the problematic background property it loads the image fine the second time. - Flupkear
Mind pasting your whole css file? As well as a structure of your html file so I can have a quick look? - Bird87 ZA

5 Answers

0
votes

try background: #0E0F10 url('http://site.com/images/the_background.jpg');

also, be sure to add a width and a height to your selector!

0
votes

use relative path in style rule solve my problem. such as image url is "http://site.com/images/the_background.jpg", and your css file url is "http://site.com/stylesheet/style.css", use "../images/the_background.jpg" instead of "/images/the_background.jpg" in your style rule.

0
votes

I happened to run into the same problem just before I believe.

Since you haven't accepted any of the answers. You might want to try, what worked for me:

Instead of:

  background-image: url(images/the_background.jpg);

Change it to:

  background-image: url('images/the_background.jpg');

With ticks... It seems odd, but it did the trick for me. Since all of my url's also had an underscore, it might be related to this, though I am not sure.

Anyway, putting the url in quotes, should make it work.

0
votes

See that this is old question. But just faced the same problem. My problem was related with z-index. Increased value for example z-index:2000; and now as if all works. Just need to check z-index for other elements

0
votes

If your file structure is like this Main Folder css img index file then type this syntax:

#element{
 background-image: url(../img/example.jpg);
}

Wrtie this code your bug will be solved.