CODEWITHSUNDEEP
htmlcssxhtml
richhallstoke
richhallstoke

Reputation: 1601

HTML full screen background image

I'm not sure whether there is a bug in the newly released Firefox 35.0 or whether there is a problem with my code, however behind a web application I have been using the following to set a high-resolution (cached) background image behind the user interface. From today after upgrading to Firefox 35.0 this no longer works properly - the background image only loads approximately 5-10% down the page from the top and then the background below is a solid #000000. If I load the same code from a computer where Firefox hasn't been upgraded it works perfectly, and in IE it works well too.

/* This is the important part */
img.background-image {
  height: auto;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* This just to give some example context */
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 is here
  </div>
</div>

Please can you advise if there is a way I can achieve this so that it works properly with Firefox and IE, all the most recent versions, or if I should leave it alone and hope Firefox will release another rapid bug fix?! Thank you.

Note: the background image specified here is just an example I found from Google Images just for this question snippet to work and not the real one used for the web application.

Upvotes: 2

Views: 19383

Answers (3)

Star Plugins
Star Plugins

Reputation: 43

I have encountered similar issues with FireFox 35.0 when using large images.

After pulling my hair out for two days, it appears this issue has been fixed in FireFox 36.0 Beta.

https://bugzilla.mozilla.org/show_bug.cgi?id=1122845

A very simple test case to show the problem is as follows:

var img = new Image();
img.style.position = 'fixed';               
document.body.appendChild(img);                    
img.src = "path/to/a/large/image.jpg";

That is just one way in which the problem manifests itself.

Only a small portion of the image will appear. The images don't even need to be massive e.g 200kb will cause problems.

Note: if you're using an existing image on your server to test this, clear the FireFox 35.0 cache first.

Upvotes: 0

U r s u s
U r s u s

Reputation: 6978

Apply CSS to the html element and get rid of the img tag.

html{

     background-size:cover;
     background-image:url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg);
}

In case you're wondering why html instead of body, check this article.

body will seem to work, but, as mentioned in a comment to this answer, html is always guaranteed to be at least the height of the window, which won't lead to unexpected behaviour.

Hope this helps you.

Upvotes: 2

ziz194
ziz194

Reputation: 312

put the background on the body tag like this

body {
background-image(url) ; 
}

Upvotes: -1

Related Questions