I'm uncertain whether the issue lies with the newly updated Firefox 35.0 or with my code. However, within a web application I utilize the following to establish a high-resolution (cached) background image behind the user interface. Starting today, after upgrading to Firefox 35.0, it doesn't function correctly - the background image only loads about 5-10% down the page from the top and then the area below is a solid #000000. If I try the same code on a computer that hasn't upgraded Firefox, it works perfectly fine, and in IE it performs well too.
/* Crucial component */
img.background-image {
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
/* Just for contextual example */
div#container {
background-color: transparent;
margin: 0 auto;
text-align: left;
width: 600px;
}
div#canvas {
height: 300px;
background-color: #ffffff;
}<div id="container">
<img class="background-image"
src="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" alt="" />
<div id="canvas">
Web Application content goes here
</div>
</div>Could you please suggest a solution to make this function properly with both Firefox and IE, specifically the newest versions, or should I leave it as is and hope for an additional bug fix from Firefox? Thank you.
Note: The background image referenced here is just a sample found on Google Images solely for this discussion snippet and not the actual image used in the web application.