Removing white space in HTML images

Question

I've reached quite a dilemma. I have an Image that I want to take up the background of a webpage. I want it to stretch across the screen width and height, and stay that size. When I use an <img> tag, I can't figure out how to stretch it to screen without white bars. wspace and hspace are deprecated in HTML5, so those don't work. Also, I tried implementing it into a CSS style, but I need to fade out the ENTIRE page with jQuery later on, and that isn't possible with putting the image in the CSS with background-image . Currently I am using this to implement the picture:

<img class='background' src='Images/backgroundImg.jpg'/>

The background class looks like this:

.background {
                max-height:100%;
                max-width:100%;
            }

What should I add to make the picture take the screen up entirely and still be possible to interact with it via jQuery? Thanks guys!

Answer 1

No need for max-height and max width, just height and width and positioning. Try:

.background {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
        }

or you want a sticky positioned image:

.background {
            position: fixed;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
        }

Answer 2

You can try object-fit property with value cover . Note, make sure to check out the browser support tables, as IE does not support it at the moment.

jsFiddle

 html, body { height: 100%; margin: 0; } img { display: block; object-fit: cover; width: 100%; height: 100%; } 

 <img src="http://lorempixel.com/400/200/sports"> 

Answer 3

use

background: url(../Content/Images/wallpaper.jpg) no-repeat center center fixed;
background-size: cover;//scretch image

Answer 4

Okay this is all that you need:

  <style> html { background: url(http://cdn7.viralscape.com/wp-content/uploads/2015/03/Manhattan-City-Line-at-night-New-York.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> 

You just need to change the link that is there, with the path to the picture you want to use ( Images/backgroundImg.jpg )!

Edit:

To fade the entire page all you need to use is this:

HTML:

<div id="overlay">

CSS:

#overlay{
    opacity:3;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
    display: none;
}

Then you can use jquery to just change display: none; to display: inline-block; or whatever!