CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3389724
user3389724

Reputation: 11

Image that fits height of window

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.

Upvotes: 0

Views: 87

Answers (3)

user1816910
user1816910

Reputation:

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

Upvotes: 0

Kelderic
Kelderic

Reputation: 6687

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, andright, all being set to0`. This will stretch it though, not resize.

Upvotes: 1

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

You can try using vw as a width unit.

Fiddle

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

img{
    width:100vw;
}

vw is viewport width.

Upvotes: 0

Related Questions