position:absolute and margin:auto in Opera

Forum Moderators: not2easy

Message Too Old, No Replies

position:absolute and margin:auto in Opera

Scaling a background image

manfredkooistra

2:51 pm on Feb 15, 2011 (gmt 0)

Hello everyone,

I want the image to scale to viewport/window height and to be centered horizontally.

For the scaling, I need position:absolute, for the centering I need margin:auto. This works in IE and FF, but not in Opera. Opera scales the image, but does not center an absolutely positioned element.

Any ideas?

You can see my full code in the source of the page. An extract is here:


#background{position:absolute;z-index:1;height:100%;left:0;right:0;margin-left:auto;margin-right:auto;}

<body>
<div>
<img id="background">
</div>
</body>

[edited by: alt131 at 6:39 am (utc) on May 19, 2011]
[edit reason] Thread Tidy [/edit]

rainborick

7:01 pm on Feb 15, 2011 (gmt 0)

Why don't you use this image as a real background image with something like:

body { background:#ccc6a9 url('/inc/img/gewirr.jpg') top center; }

manfredkooistra

7:13 pm on Feb 15, 2011 (gmt 0)

Thank you.

Because then it does not scale to fit the window. Or at least I don't know how to do that.

rainborick

2:03 am on Feb 16, 2011 (gmt 0)

I suspect that Opera needs you to set a specific width on the object (your image) before it will calculate the margins using 'auto'. You might overcome that with some JavaScript, but you could first try adding height="100%" to the <img> tag and see if that helps before trying the JavaScript kludge. Good luck!

manfredkooistra

4:43 am on Feb 16, 2011 (gmt 0)

Hmm, I guess I have a solution.

My first idea was derived from Stu Nicholls' example at CSS Play (the forum won't allow me to post a link, but if you google for "Stu Nicholls background", you'll find the page).

Stu streched an image to cover the whole browser window in this way:

position:absolute; width:100%; height:100%;

This of course changes the height/width ratio of the image to fit the browser window, since the images is streched to fit that window. I wanted the image to be only vertically scaled to fit the window height, and to retain its own ratio. So I changed Stu's example to:

position:absolute; height:100%; margin-left:auto; margin-right:auto;

While this works well in Firefox and Internet Explorer, it does not work in Opera. Opera appears not to apply the margin:auto to elements that are absolutely positioned. (And it appears not to apply it to inline elements like images.)

So my solution was twofold:

Set the image to display:block and not position it absolutely, so as to allow Opera to center it with margin:auto. Then set the height of the html, body and wrapping div to 100%, to give a reference for the image's height of 100%. Like this:

html,body,#wrapper{height:100%;}
#background{height:100%; margin-left:auto; margin-right:auto; display:block;}

This works in the most recent versions of IE, FF and Opera. I haven't had a chance yet to test in IE 6 and 7.

The complete code for a minimal functional example looks like this:

<!doctype html>
<html>
<head>
<style type="text/css">
html,body,#wrapper{
height:100%;
}
#background{
height:100%;
margin-left:auto;
margin-right:auto;
display:block;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="background" src="some_image.jpg">
</div>
</body>
</html>

TheMadScientist

4:58 am on Feb 16, 2011 (gmt 0)

#background{
position:absolute;
z-index:1;
top:0;
height:100%;
left:50%;
margin-left:-1/2 the width of the image;
}

If the image is 500px wide:
#background{
position:absolute;
z-index:1;
top:0;
height:100%;
left:50%;
margin-left:-250px;
}

Haven't tested it but I think that'll do the trick.

Could probably adjust it a bit to your liking, but that's generally how to center with fixed or absolute positioning afaik.

manfredkooistra

5:08 am on Feb 16, 2011 (gmt 0)

Thank you, I already have a solution (see my last post). Yours doesn't work for me, because I don't have the width of the image (the width changes as the image is scaled to fit the height of the browser window.)