Windows 7 Chrome Browser Not Displaying Background

I have a background image(Our Mission & Vision) that doesn’t seem to be displaying in Chrome (40.0.2214.93). Chrome displays the body background color of #FFF, but not the image I’ve chosen UNLESS I’m viewing the code in Firebug then the background just suddenly appears.

Is anyone else experiencing this issue?

  1. Which element is supposed to have that background-image? You say the Mission and vision text…so that h3?
  2. Might be because of these validation errors.

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fheather-visser.com%2Fclient%2FavDemo%2Fdev%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

I selected elements (the vision text) AND elements around it and I couldn’t find any element that supposedly had a background image on it. Was I looking in the wrong place?

PS - I have the same Chrome version but I didn’t see any magic image appear when I did inspect elements.

Really do try and fix those validation errors though.

Edit - went back and now the image is there.

Edit2 - Refreshed and now it’s staying there 100% of the time.

The image wasn’t there before but seems to be in place now although it isn’t working as a fixed element any more because of the backface visibility rule on the body element.

body{
-webkit-backface-visibility: hidden;
}

Unfortunately in webkit any child of that rule will lose its fixed position. I’ve written about this before.

RyanReese:
A lot of those validation errors are interesting to see, even though some–if not most–seem to possess valid CSS markup based upon W3C. This is rather odd. I did, however, come across some invalid markup and fixed some of that. Thank you for pointing that out.

PaulOB:
So I’m better off just removing the ‘fixed’ background attachment just to make all browsers happy. Good enough! Looks good anyways! It’s the first time I’ve ever encountered such a hiccup, but then I wasn’t combining animations in the container either at those times.

Thank you, gentlemen.

The -webkit-, -moz-, and -o- extension ones you can ignore, but other than that most of those errors could be fixed. I see some major bracket errors too.

Either way, you got it working. Good job.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.