The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

100% height body with bottom background in Opera

Hi
I need to position background image at body's bottom. No problem... but I want it to be on bottom of the "viewport", so even if there is little content, background will stay on the bottom of browser window.
This works for IE & FF, but not for Opera.

You'll need to define a bit more clearly what you want to happen as it would not make much sense to have an image at the bottom of the viewport at all times.

If the image is at the bottom of the viewport then what happens when the content exceeds the viewport height? The content will over-write the image and you won't see it. Is this what you want to happen? If you just want it as a watermark the that's OK for the content to be on top.

Otherwise if you mean you want an image at the bottom of the viewport on short pages but at the bottom of the document if the content is greater than initial viewport height then that is a different technique.

The faq on 100&#37; height explained 100% height in detail and the FAQ on putting a footer at the bottom shows an example of the latter method mentioned above.

But my question is still open, why it's impossible to get 100&#37; min-width for body in Opera?

You didn't pose that question anywhere above that I can see !

There is no problem in getting a 100% min width for body as that is what it will default to anyway so I'm not sure exactly what you mean?

If you meant min-height:100% then I have already shown you how to do that by setting html,body to height:100%. You can't base the height of the body on the height of the html element if the html element has no height (i.e. min-height:100%). A min-height rule is not taken into account for the purposes of basing a childs height on the parent and the height will default to height:auto; which means that you can't use it as a basis for any percentage height calculations.

Yeah, I meant min-height, sorry.
However I don't understand your answer... so it's not possible to achieve min-height 100&#37; for body? I know that I have to set html height to 100%, but even then, min-height won't work for body.
Yeah, I know 100% height is tricky, but I really don't know why... It worked for tables perfectly, so I really don't know why "height model" isn't same for other elements.
Thank you very much for your time & answers.

It worked for tables perfectly, so I really don't know why "height model" isn't same for other elements.

Well no it didn't really work for tables and still has the same problems in standards mode in some browsers. Height was never meant to be a valid attribute for tables anyway. Which is the reason that you can get away with it in tables because tables expand whatever height you set.

When you set a height then you set the height and that's it. You can't set a height and then expect it to be something else just in case. If you say height:500px then all you get is a height of 500px.

If you say 100&#37; and that 100% equates to 500px then all you get is 500px.

If you say min-height:500px then height still remains at auto and a percentage based on auto height collapses to zero (or content height).

This is just the way CSS works because it has a lot more to consider that tables ever had to and must use a uniform concept. It would be nice to say make this element always match the height of the parent (or adjacent element) but there isn't a way to do this cross browser until display:table is common place. (You'll probably have to wait until IE8 is the main IE browser.)

The above code applies a left border image to the html element and a right border image to the body element. Both images will stretch with content accordingly and also fill the initial 100% viewport height.

But usually you would set html,body {height:100%} and then use an #outer wrapper for the min-height:100% element.

It's never a good idea to style the html element other than reducing margins and padding anyway due to browser discrepancies.

Opera has a severe redraw problem when you resize the height of the screen (in 100% layouts) and it won't adjust for the move unless you refresh the page. This is an old Opera problem and the reason that I don't like or use opera. You could add an opera javascript fix on resize as I have done with this demo.

If the above doesn't answer your questions you may need to explain what you are trying to do again as I'm sure one of the above answers will satisfy your requirements