Click here to Skip to main content
11,717,509 members (81,000 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML
Hello everyone, I am trying to start a website and I have run into a bit of trouble:

I cannot seem to get an image to fit the width of a page, and then scale itself vertically to keep proportions. How would I go about this?

<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Untitled Document</title>
</head>
 
<style>
        #banner {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
</style>
 

<body>
 
<img id="banner" src="MTBHome1.jpg" alt="Banner Image" style="position: fixed; left: 0; top: 0"/>
<h1><center>The Tribe</center></h1>
<p> <center> This is text </center> </p>
 
</body>
</html>

That is what I have so far, and it gives me the full screen/page look, but the image does not always maintain proportion. What should be added to do this? And also, I assume, that by doing that, scroll bars are automatically added?

Thank you.
Posted 14-Feb-13 23:15pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

This should work, just drop the 100% on the height and it should scale:

#banner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: -1;
}
  Permalink  
Comments
vlad781 at 15-Feb-13 12:16pm
   
Yes, that worked. Thank you, but the image exceeds the window height (that is fine), but the scrollbars do not show up. How can I add them so the user can scroll down to the material below the image?
Chris Reynolds (UK) at 15-Feb-13 12:22pm
   
The scrollbars will appear when you have content that needs them so if you add a load of extra text to your page they should appear, the image on its own won't cause the scrollbars. Hope that makes sense.
vlad781 at 15-Feb-13 12:24pm
   
Oh, ok, Thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 689
1 OriginalGriff 255
2 F-ES Sitecore 210
3 Jochen Arndt 120
4 Maciej Los 120
0 Sergey Alexandrovich Kryukov 1,144
1 Maciej Los 509
2 OriginalGriff 505
3 Richard MacCutchan 440
4 CHill60 415


Advertise | Privacy | Mobile
Web02 | 2.8.150901.1 | Last Updated 15 Feb 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100