Background image alignment troubles

Question

0.00/5 (No votes)

See more:

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?

XML

<!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

vlad781

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Chris Reynolds (UK) · Accepted Answer · 2013-02-14T23:31:00

Solution 1

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

CSS

#banner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: -1;
}

Posted 14-Feb-13 23:31pm

Chris Reynolds (UK)

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.