HTML full screen background image

19,254

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.

Share:
19,254

Related videos on Youtube

richhallstoke
Author by

richhallstoke

Please see LinkedIn profile: https://www.linkedin.com/in/richardhall

Updated on September 14, 2022

Comments

  • richhallstoke
    richhallstoke over 1 year

    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.

    • PlantTheIdea
      PlantTheIdea about 9 years
      why are u using an actual <img> tag for fullscreen background image instead of ... u know ... a background-img? CSS-only with background-size:cover; would make this a lot easier.
  • richhallstoke
    richhallstoke about 9 years
    This unfortunately would not give a full-screen background image scaled, but would use the image in it's original dimensions and tile it. The solution needs to work for all desktop screen sizes.
  • ziz194
    ziz194 about 9 years
    you just need to add background-size : cover