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;
}Wót cor-el změnjony
Wšykne wótegrona (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)