CODEWITHSUNDEEP
javascriptjquerycsshtml
Taylor Brown
Taylor Brown

Reputation: 89

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!

Upvotes: 1

Views: 1098

Answers (4)

Trevor Clarke
Trevor Clarke

Reputation: 1478

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!

Upvotes: 0

Stickers
Stickers

Reputation: 78686

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">

Upvotes: 1

gmfm
gmfm

Reputation: 669

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;
        }

Upvotes: 1

ErhanKarabulut
ErhanKarabulut

Reputation: 33

use 

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

Upvotes: 0

Related Questions