No background image, gradient in Chrome browser

On this page I can see a background image and a linear gradient in FF, but I cannot see it in Chrome.

I do see that the <section> it is in does have a ‘fixed’ position. I tried removing/replacing that within the Browser Developer Console, but it didn’t make any difference to display the background image/gradient.

Do any of you see any other reasons for these to not show up?

There appears to be a stray close </p> tag in the HTML (line 336). Try deleting it and see if that helps.

Hmmmm. It seems to be part of a paragraph inside of a paragraph, which doesn’t make sense. You will probably need to delete the opening paragraph tag on the line above it, too.

Well, no, that doesn’t have anything to do with it. But thank you for pointing that out to me.

You sound a bit casual about the observation, but as it happens, the section about the Special Event is the first one that failed in Chrome for me. I also noticed that the HTML in that section is entirely different from the HTML in the preceeding working sections. Just another observation.

After finagling with it for about an hour, I figured out that ‘background-image’ was being set when it should have been ‘background’. I then reset the gradient layering by just using linear-gradient and both FF and Chrome seem to be pretty happy with it.

Thank you for the heads up regarding ‘p’ tag error. I wouldn’t have noticed it before.

It can be easy to create errors without ever noticing them. That’s why you should make a habit of regularly validating code during production and before publication.
It will spot the things you never notice.

1 Like

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