Background image on my site not loading. Works in Chrome/Safari.
My website, www.youbrewyou.co, looks good on Safari and Chrome, but the homepage background image isn't loading on Firefox. The image itself just shows up as gray when I open it directly. Like I said, no issues in other browsers. Insight would be much apprecaited!
Website: youbrewyou.co Image: http://youbrewyou.co/images/homeHero2.jpg
HTML: <body class="homeHero"> content </body> CSS: body.homeHero{ background: url(./images/homeHero2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -2; }
Змінено
Усі відповіді (1)
Firefox's web console shows:
Image corrupt or truncated. http://youbrewyou.co/images/homeHero2.jpg
It does seem to load in a stand-alone tab if you bypass the cache. (Mac: Command+Shift+r, Windows: Ctrl+Shift+r)
I suspect it's a problem with the image size reported by the server: it says
Content-Length: 2031616
which is the uncompressed size, but it is sending the image compressed down to about 1050276 bytes.
When Firefox gets a file smaller than the stated size, it stops rendering it. It doesn't decompress it and check again.
Likely this is a web server configuration issue, but not sure of the best fix.
Similar thread: Our clients are having trouble downloading a text (.txt) file from our site on version 33.0 (using a filestream)