Scalable image horizontally centered in browser window

HTML & CSS
1

Greetings,

I’ve created a web page with an image that scales in relation to the height of the browser window and a navigation bar that remains attached to the bottom. The original image size is 1024x700px. In order to prevent image distortion, I’ve left the width values blank.

So far it looks the way I intended, but one thing’s missing: I’m trying get the image to stay horizontally centered in the browser window. I’ve played around with “left” and “margin” values for the “#bgd img” and tried setting surrounding divs and body parameters to “margin:0 auto,” with no luck so far.

If anyone knows how this can be done and would like to share a solution, I’d be greatly obliged.

Thanks! Here’s my source code (I’ve refrained from linking to the image because it’s my first post, but any 1024x700px image would do the trick):

<html>
<head>
<title>Scalable Image Horizontally Centered in Browser Window</title>

&lt;style type="text/css"&gt;
	* {margin:0; padding:0;}
	body {background:#ccc;}

	h1 {font:normal 18px "palatino linotype", "book antiqua", palatino, serif;}

	#bgd img {height:100%; min-height:500px; position:absolute;}

	#globalnav {position:fixed; bottom:0; width:100%; height:80px; background:#fff;}

	#topnav {width:440px; margin:20px auto;}

&lt;/style&gt;

</head>

<body>

<div id=“bgd”>
<img src=“place-image-here.jpg” alt=“Where the 1024x700px jpeg goes” />
</div>

<div id=“globalnav”>
<div id=“topnav”>
<h1>This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar.</h1>
</div>
</div>

</body>
</html>

2

HI,

Im not sure if this is what you mean but if you just set text-align:center on #bgd then the image should center horizontally.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html,body{height:100&#37;;}
body {
    background:#ccc;
}
h1 {
    font:normal 18px "palatino linotype", "book antiqua", palatino, serif;
}
#bgd{
    text-align:center;
    height:100%;
}
#bgd img {
    top:0;
    height:100%;
    min-height:500px;
}
#globalnav {
    position:fixed;
    bottom:0;
    width:100%;
    height:80px;
    background:#fff;
}
#topnav {
    width:440px;
    margin:20px auto;
}
</style>
</head>
<body>
<div id="bgd"> <img src="images/1024x700.png" alt="Where the 1024x700px jpeg goes" /> </div>
<div id="globalnav">
    <div id="topnav">
        <h1>This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar.</h1>
    </div>
</div>
</body>
</html>

The image will be 100px too high though because you have it at 100% height which will be include the space where the footer is.

3

Paul, that did the trick! Thank you so much for your speedy and helpful solution.

4

If I understood right you wanted the image in centre also when scaled wider than viewport? :slight_smile:

That could be done by adding an extra container that always is wider than the scaled image.


<div id="bgd">
<p><img src="place-image-here.jpg" alt="Where the 1024x700px jpeg goes" /></p>
</div>


#bgd{
    text-align:center;
    height:100&#37;;
    overflow:hidden;
}
#bgd p {
    margin:0 -999px;
    height:100%;
}
#bgd img {
    height:100%;
    min-height:500px;
}
5

Hello again and thanks to all of you who offer your wisdom on this forum.

I’ve found that the centered navigation bar (#globalnav) disappears in IE6 and earlier versions of Explorer. The problem does not occur in IE7, IE8, Safari 4.0 or Firefox 5.0, for example.

Any clues as to how to stop the disappearing act?

As a separate experiment, I tried adding a negative margin to the scalable image to get rid of the extra space where the footer is, and it seems to work. I made the following change to the css:

#bgd img {top:0; height:100%; min-height:500px; margin-bottom:-80px;}

6

Hi,

I assumed you weren’t supporting iE6 because you were using position:fixed which Ie6 doesn’t understand.

You could use an expression to mimic position:fixed in IE6 like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html,body{height:100&#37;;}
body {
    background:#ccc;
}
h1 {
    font:normal 18px "palatino linotype", "book antiqua", palatino, serif;
}
#bgd{
    text-align:center;
    height:100%;
}
#bgd img {
    top:0;
    height:100%;
    min-height:500px;
}
#globalnav {
    position:fixed;
    bottom:0;
    width:100%;
    height:80px;
    background:#fff;
        overflow:hidden;
}
#topnav {
    width:440px;
    margin:20px auto;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#globalnav {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight) 
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}       

html {background:url(fake.gif) no-repeat 0 0}/* use a 1px x 1px transparent gif to enable smooth scrolling of expression*/
</style>
<![endif]-->

</head>
<body>
<div id="bgd"> <img src="images/1024x700.png" alt="Where the 1024x700px jpeg goes" /> </div>
<div id="globalnav">
    <div id="topnav">
        <h1>This is a centered navigation bar. This is a centered navigation bar. This is a centered navigation bar.</h1>
    </div>
</div>
</body>
</html>
7

it’s working great, thanks!