Removing white space in HTML images

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!

Answers 1

  • 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!


Related Articles