Stretched out image

Artashes · Post #1 (**permalink**) 11-15-2006, 08:32 PM

This question is directed at any web design gurus out there: how do you make a picture/image be so evenly stretched out (or simply embedded) into page's size like on this page:

http://www.microsoft.com/windowsvista/

The image is of perfect width and length... Also, is it possible to do so that the scroller won't be needed?

Best,

Blue · Post #2 (**permalink**) 11-15-2006, 08:45 PM

Can't help you out on this one Art, but if you ask Paul at http://www.iwdn.net/index.php? (aka the_pm) I bet he would have the answer for you.

Artashes · Post #3 (**permalink**) 11-15-2006, 09:09 PM

I know who he is but I don't know him personally, so I don't think it would be appropriate for me to bother him just to find out the answer. I am sure we have some users proficient enough to give a tip.

Thanks though!!

Best,

ldcdc · Post #4 (**permalink**) 11-15-2006, 09:18 PM

I'm no expert, but from what I can see, the background is not streched out at all. It's just a very wide image/picture (1400px). The part that doesn't fit the page is simply not shown. (I suspect this is simply how browsers work when it comes to backgrounds.)

http://www.microsoft.com/library/med...kgnd_photo.jpg

I see they used CSS to position it so perfectly. the trick must be here:

Quote:

#wvhpA
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 440px;
z-index: 0;
background: url(/library/media/1033/windowsvista/images/wv_home_bkgnd_photo.jpg);
background-repeat: no-repeat;
}

http://www.microsoft.com/windowsvist...udes/wvhp2.css

Artashes · Post #5 (**permalink**) 11-15-2006, 09:21 PM

Very cool find, Dan.

I think they make it so wide (1400px) is to satisfy the largest screen resolutions known to even most savvy tech users (in case they browse with 1400px width view).

In addition, they somehow make the picture sit in the background to satisfy most screen resolutions.

EDIT: I wonder whether there is a feature in Dreamweaver/FrontPage to accomplish the same for static sites without CSS.

ldcdc · Post #6 (**permalink**) 11-15-2006, 09:23 PM

I just realised I did a mistake. Above post modified.

ANMMark · Post #7 (**permalink**) 11-15-2006, 11:22 PM

Well, as Dan said, it's just CSS, with a wide image.

You can do the same with something like this:

Code:

<td style="background-image:url('images/image.jpg'); background-repeat:no-repeat; height:305px;">

Artashes · Post #8 (**permalink**) 11-16-2006, 10:59 AM

This is great, Mark, I will give this a run once I get back home.