Get Paid to Participate - up to $1 per post!     Twitter     Facebook     Google+
Hosting Discussion
 

forgot password?



Reply


Old
  Post #1 (permalink)   11-15-2006, 08:32 PM
HD Management Staff
 
Artashes's Avatar
 
Join Date: Apr 2003
Posts: 9,814

Status: Artashes is offline
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,
 
 
 


Old
  Post #2 (permalink)   11-15-2006, 08:45 PM
HD Wizard
 
Blue's Avatar
 
Join Date: Oct 2003
Location: PEI
Posts: 2,713

Status: Blue is offline
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.
__________________
Hampshire Hosting
Affordable Shared and Reseller Hosting
 
 
 


Old
  Post #3 (permalink)   11-15-2006, 09:09 PM
HD Management Staff
 
Artashes's Avatar
 
Join Date: Apr 2003
Posts: 9,814

Status: Artashes is offline
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,
 
 
 


Old
  Post #4 (permalink)   11-15-2006, 09:18 PM
HD Wizard
 
ldcdc's Avatar
 
Join Date: May 2004
Location: Ploiesti
Posts: 3,112

Status: ldcdc is offline
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

Last edited by ldcdc : 11-15-2006 at 09:22 PM. Reason: idiot
 
 
 


Old
  Post #5 (permalink)   11-15-2006, 09:21 PM
HD Management Staff
 
Artashes's Avatar
 
Join Date: Apr 2003
Posts: 9,814

Status: Artashes is offline
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.
 
 
 


Old
  Post #6 (permalink)   11-15-2006, 09:23 PM
HD Wizard
 
ldcdc's Avatar
 
Join Date: May 2004
Location: Ploiesti
Posts: 3,112

Status: ldcdc is offline
I just realised I did a mistake. Above post modified.
 
 
 


Old
  Post #7 (permalink)   11-15-2006, 11:22 PM
HD Wizard
 
Join Date: Sep 2004
Location: Pennsylvania
Posts: 1,628

Status: ANMMark is offline
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;">
__________________
Mark
NIC™ - Network Innovative Concepts - Get ready for R.A.I.N.
Protect your website from hackers NIC™ - SiteLock
 
 
 


Old
  Post #8 (permalink)   11-16-2006, 10:59 AM
HD Management Staff
 
Artashes's Avatar
 
Join Date: Apr 2003
Posts: 9,814

Status: Artashes is offline
This is great, Mark, I will give this a run once I get back home.
 
 
 
Reply

Thread Tools

New Post New Post   Old Post Old Post
Posting Rules:
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Sponsored By: