Click here to Skip to main content
12,397,027 members (68,574 online)
Rate this:
 
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 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) 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 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
Top Experts
Last 24hrsThis month


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