homepage Welcome to WebmasterWorld Guest from 54.205.236.46
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
position:absolute and margin:auto in Opera
Scaling a background image
manfredkooistra




msg:4267351
 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




msg:4267504
 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




msg:4267510
 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




msg:4267720
 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




msg:4267769
 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




msg:4267772
 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




msg:4267773
 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.)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved