PDA

View Full Version : Centerd div not staying put in Opera


Gaillen
Jun 1st, 2010, 12:53 PM
I have a full page height fixed (no scroll) background image in my design that I wanted stretched to window height but not width and centred because the image is narrow and blends with the background colour. I played with the CSS solution from tutorials by Stu Nicholls , Chris Coyier & Jennifer Kyrnin and came up with a solution that works in Firefox, Safari, & IE8 but not in Opera. In Opera it does everything but centre.

I am hoping another set of eyes might see a solution.

I have included a full sample document that is tested to work/fail and can be tested as an index.htm if you assign an image and some content to test the scrolling.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<title>Faking a Stretched Background Image - Across the Whole Page</title>
<meta name="keywords" content="background size, background stretch,
stretched background images">
<meta name="description" content="Use the z-index property to layer your
content on top of your stretched background image.">
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:fixed;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:-99;
}
#bg img {
min-height:100%;
}
#content {
width:200px;
z-index:1;
}
</style>
</head>
<body>
<div align=center>
<div id="bg">
<img style="display:block;" src="your_bg_image.gif">
</div>
</div>
<div id="content">
//your content here!
</div>
</body>

</body></html>

Cheers! :confused:
effpeetee
Jun 1st, 2010, 01:46 PM
Try

text-align:center;

in the bg div.

Frank (http://www.exitfegs.co.uk/Sources.html)
Gaillen
Jun 2nd, 2010, 01:47 AM
text-align:center;

No joy. I also added chrome to the list of browsers not liking this. Same reaction as in Opera, no centring but resizing is good.
Gaillen
Jun 2nd, 2010, 02:35 AM
oops! looks like I spoke too soon. Some of the other css must have been causing conflicts because after a bunch of cleaning effpeetee's text-align:center; worked. Thank you effpeetee :thumbsup:

Cleaned up the extra dive and redundant mark up and css. Here is the final code working in current Firefox, Safari, IE8, Opera, Chrome.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<title>Faking a Stretched Background Image - Across the Whole Page</title>
<meta name="keywords" content="background size, background stretch,
stretched background images">
<meta name="description" content="Use the z-index property to layer your
content on top of your stretched background image.">
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:fixed;
left:0;
right:0;
bottom:0;
top:0;
padding:0;
overflow:hidden;
text-align:center;
z-index:-99;
}
#bg img {
min-height:100%;
}
#content {
width:200px;
z-index:1;
}

</style>
</head>
<body>

<div id="bg">
<img src="your_bg_image.gif">
</div>

<div id="content">
//your content here!
</div>
</body>

</body></html>

Also based on effpeetee's tip I found this tutorial explaining the image centring issues including depreciated concepts. Apparently a big chunk of my brain has been depreciated :rolleyes:

http://www.netmechanic.com/news/vol7/html_no10.htm