Image that fits height of window

Question

I'm trying to achieve something similiar to this kind of thing where there is an image which fills window until you scroll down. I really have no idea how to achieve this. I'm guessing through jQuery? I really haven't been able to find anything. My knowledge of jQuery is limited, though I do have an understanding of Javascript.

Thank you for any help.

---

Answer 1

You don't need jQuery or Javascript at all. You need a full screen div, with a background image.

Working JSFiddle

HTML:

<div class="fullscreenimg"></div>

CSS:

.fullscreenimg {

   background-image:url(IMAGEURL);

   background-size:cover;

   width:100%;

   height:100%;

}

EDIT : As pointed out in comment, this will work in modern browsers and several back, but it won't work in older versions (6-8) of IE.

An alternative for older browsers would be to use a <img> , and position it absolutely, with top , bottom', left , and right , all being set to 0`. This will stretch it though, not resize.

Answer 2

You can try using vw as a width unit.

Fiddle

<img src="http://placehold.it/1024x768" />

---

img{
    width:100vw;
}

vw is viewport width.

Answer 3

There are two ways to answer this. I am unsure which answer you need so Ill provide both.

You can make an image cover the veiwport height, and then you can make it cover window height.

The first way is the trickier way, but still simpler than youd think. HTML

<img src="whatever.png" class="bam">

CSS

.bam {height:100%; width:100%;}

jQuery

var fullheight = $(document).height();
$(".bam").css("height", fullheight);

The following shows how to make it at full window size. Full size window stretch - Fiddle

This one shows the view port version. Viewport stretch image - fiddle