Image covers window on page load

Question

How do I make an image fit the screen (not a full background image) so that when you scroll down the other content is shown?

An example of what i'm talking about is here:

http://www.microsoft.com/visualstudio/eng/products/visual-studio-professional-2012

In that example look at how the image reacts as you resize the screen and scroll down.

I look forward to your responses.

Thank you.

PS: If you can send a demo of it as well, that would be really helpful. Thank you!

Have you tried anything? What do you propose using to accomplish this? — Seth, Jul 19 '13 at 01:04
Well, I tried just setting the width of the image to 100%, but it still achieve the effect height wise... Not sure if the image has to be a specific size or if it has to do with a jquery plugin... — Savion Smith, Jul 19 '13 at 01:07
Please, press F12 in Google chrome while visiting the page you can see everything you need. — Cԃաԃ, Jul 19 '13 at 01:08
I believe this answer will solve your problem (using only CSS): http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang — sergio.s, Jul 19 '13 at 01:11
@SavionSmith **Q:** Be honest here. How much time have you researched your wish to attempt the same or similar effect? - I'll be honest with you; I was looking to achieve something similar about 3-4 months back, and spent the better time of **2 days** (4-5 hours a day) in trying achieve something like it and found part of my answers here on SO, while Googling it. There are a few ways in doing this, either by using jQuery with a mix of CSS, as well as doing it in `Pure CSS`. Show us what you tried, and we could probably take it from there. — Funk Forty Niner, Jul 19 '13 at 01:24
Well I tried making the image width and height 100% and that worked okay for web, but it made it look weird in mobile.I downloaded the image that they use in the link above and it didn't work at all... just kinda stumped. Kinda new at this... Thank you for your any help. — Savion Smith, Jul 19 '13 at 01:30
@SavionSmith I'll give you a few keywords/phrases for you to Google. **1) responsive web design** and **2) @media screen and (max-width: 600px)** or other pixel width. That should get you started. Find some code, work it and if you have any trouble, then come back and post a new question with some `code`. We'll be more than happy to help then. Cheers - **P.s.:** View the `source` code of pages you visit and study it. — Funk Forty Niner, Jul 19 '13 at 01:36
Thank you Fred for responding. Just so you can see, this is what I've been able to achieve so far... http://savionsmith.com/sample.php ... not the desired effect though... — Savion Smith, Jul 19 '13 at 01:44
@SavionSmith **P.p.s.:** I am so **pig-headed**, I sometimes don't go to bed till **6-7am** in researching and trying to **find a solution** until I figured out the way to achieve a goal, and my girlfriend literally wants to **kill me** when I pull stunts like that. I don't recommend doing this, but it's called **"perseverance**, and that will either help you and maybe get you into trouble. However, the trouble doesn't last for more than... let's say, a week? Keep at it and you'll find solutions, you just need to **pay your dues** "as it were" and work hard at it, but mostly enjoy it. ;-) — Funk Forty Niner, Jul 19 '13 at 01:46
@SavionSmith You're welcome. From what I can tell by what you've tried so far, you're doing rather well. Now, what is that you need help with? It looks pretty close to the Microsoft example you gave. Is it the fact that there's a different Top Menu when the browser is resized? — Funk Forty Niner, Jul 19 '13 at 01:49
@Fred no, it's the effect of, no matter what you resize the window to, when you scroll down the content at the bottom is immediately shown. If you look at my example, you have to scroll a little more through the photo then the content is shown... — Savion Smith, Jul 19 '13 at 01:53
@SavionSmith My screen's resolution is 1024x768 (laptop), so I might not be seeing the same effect as you, if you're on a widescreen. — Funk Forty Niner, Jul 19 '13 at 01:59
@SavionSmith Another thing, I'm using Firefox v22. I don't use IE (for so many reasons), in case that's the Web browser you're using. — Funk Forty Niner, Jul 19 '13 at 02:09
@Fred OS: **Mac** Using Screen Resolution of: **1440 X 900** (laptop) Browser: **Firefox v22** — Savion Smith, Jul 19 '13 at 02:16
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33735/discussion-between-savion-smith-and-fred) — Savion Smith, Jul 19 '13 at 02:17
@SavionSmith Doesn't seem like you're in chat anymore. Closing windows. — Funk Forty Niner, Jul 19 '13 at 02:52

score 0 · Answer 1 · answered Jul 19 '13 at 01:13

The following JS should help:

    function resizeBackground() 
{
    var targetWidth;
    var targetHeight;

    if (typeof window.innerWidth != 'undefined')
    {
        targetWidth = window.innerWidth,
        targetHeight = window.innerHeight
    }
    else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    {
        targetWidth = document.documentElement.clientWidth,
        targetHeight = document.documentElement.clientHeight
    }
    else
    {
        targetWidth = document.getElementsByTagName('body')[0].clientWidth,
        targetHeight = document.getElementsByTagName('body')[0].clientHeight
    }

    var background = new Image();
    background.src = document.getElementById("backgroundImage").src;
    var target = document.getElementById("backgroundImage");
    var sourceWidth = background.width;
    var sourceHeight = background.height;

    if (targetWidth / sourceWidth > targetHeight / sourceHeight)
    {
        target.width = targetWidth;
        target.height = sourceHeight * (targetWidth / sourceWidth);
    }
    else
    {
        target.width = sourceWidth * (targetHeight / sourceHeight);
        target.height = targetHeight;
    }
}
window.onload = resizeBackground;
window.onresize = resizeBackground;

Then insert the div wherever you would like you image as so:

<div id= 'backgroundimage'></div>

And finally CSS:

#backgroundimage {background-image:url(image.jpg); width:100%;}

Hi Liane, When I did your code and viewed it online, the image didn't show up — Savion Smith, Jul 19 '13 at 02:12
@SavionSmith Have a look at the following link, which may help and it's **Pure CSS**: http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios — Funk Forty Niner, Jul 19 '13 at 14:08

Image covers window on page load

1 Answers1