Click here to Skip to main content
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 15-Feb-13 0:15am

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 OriginalGriff 495
1 Maciej Los 340
2 Richard MacCutchan 265
3 BillWoodruff 225
4 Mathew Soji 200
0 OriginalGriff 8,804
1 Sergey Alexandrovich Kryukov 7,457
2 DamithSL 5,689
3 Maciej Los 5,279
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web02 | 2.8.1411028.1 | Last Updated 15 Feb 2013
Copyright © CodeProject, 1999-2014
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