HTML full screen background image
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.
Related videos on Youtube
richhallstoke
Please see LinkedIn profile: https://www.linkedin.com/in/richardhall
Updated on September 14, 2022Comments
-
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 about 9 yearswhy are u using an actual
<img>
tag for fullscreen background image instead of ... u know ... abackground-img
? CSS-only withbackground-size:cover;
would make this a lot easier.
-
-
richhallstoke about 9 yearsThis 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 about 9 yearsyou just need to add background-size : cover