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 the

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

Change css class as:


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

Answer 4

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.

Answer 5

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)