CSS Background Images not loading

Question

I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.

when you then F5 the page, the background images all load in.

When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.

Neither when you check the downloaded resources are there even any mention of the background-images downloading.

you then refresh the page and it works fine, tool-tip of the css url even shows a preview.

The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.

Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.

I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!

$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);

});

this happens on every instance of windows in multiple versions of chrome.

any ideas would be great! thankyou!

you might be able to see it happen on http://ensa.ac.uk

here is a video demonstration @ http://youtu.be/oLTyhk5rXgE

Answer 1

Just to note.

The problem had been solved.

The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.

Answer 2

First of all, fix these:

backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);

If images is a subfolder then use

url('images/logo-bg2.jpg');

instead of

url('/images/logo-bg2.jpg');

in main.css

Answer 3

Try this instead. Not tested though;

$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});

And make relevant changes (ie, background-image to background) in your CSS also.

OR try;

$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});

From some search and research I came to a conclution;

The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)

Answer 4

Change css class as:


#nav
{
    background-image: url(../images/logo-bg2.jpg);
    height: 180px;
}

Answer 5

Owen,

I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it

e.g. " rel="stylesheet" type="text/css" />

I know that this causes the css to never be cached, but I have not found any other solution.