CODEWITHSUNDEEP
css
Dillon
Dillon

Reputation: 13

CSS image background - stretch height to 100% but keep image horizontally centered on page

Any help would be greatly appreciated!!

The page I'm working on is here http://www.iknowpost.com/

What I'm attempting to do is keep the background image stretched to 100% height, regardless of the viewer's screen size, while keeping the image centered horizontally on the page at all times. As of now I've got the 100% height figured out, but I've been trying unsuccessfully to figure out how to center it horizontally - currently it's fixed left: 0px; I think this should be pretty simple. My code is below, and perhaps this isn't the right way of going about this. Thanks!

<style type="text/css">
#background {
width: 100%; 
height: 100%; 
position: fixed;
left: 0px; 
top: 0px; 
z-index: -1;
}

.stretch {
    height:100%;
}
</style>

</head>

<body>
<div id="background">
    <img src="logo.jpg" class="stretch" alt="" />
</div>
</body>
</html>

Upvotes: 1

Views: 3086

Answers (3)

Jonah Katz
Jonah Katz

Reputation: 5288

Simple! just add the following to your .stretch {} :

margin-left:auto;
margin-right:auto;

Upvotes: 0

Robert
Robert

Reputation: 1127

Maybe this will help

<html>
<head>
    <style type="text/css">
        #background {
            width: 700px;
            height: 100%; 
            margin: 0 auto;
            z-index: -1;
        }

        .stretch{
            height:100%;
        }
    </style>
</head>
<body>
    <div id="background">
        <img src="logo.jpg" class="stretch" alt="" />
    </div>
</body>

Upvotes: 1

Piotr Rochala
Piotr Rochala

Reputation: 7781

Im sure there are other ways to add background like that, but in this case add #background { text-align: center; } and it will center your image in the provided container.

Upvotes: 0

Related Questions