SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot pozmu's Avatar
    Join Date
    Jul 2001
    Location
    Poland/ Warsaw
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.
    Code CSS:
    html 
    {  
    	min-height: 100%;
    }
    body 
    {
    	background-image:url('slices/bottom.gif');
    	background-repeat: repeat-x;
    	background-position: bottom;
    }
    Could you help me?
    Thanks in advance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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% 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.

    Let me know exactly what you want and I'll knock up an example.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you want the image fixed at at he bottom of the viewport forever you would do something like this.

    Code:
    *{margin:0;padding:0}
    html,body{height: 100%;}
    body    {
        background: url(images/barfade.gif) repeat-x fixed bottom;
    }

    If you want the image (like a footer) then you would do something like this.

    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    html,body{height: 100%;}
    #outer    {
        background: url(images/barfade.gif) repeat-x bottom;
        min-height:100%;
        width:100%;
    }
    * html #outer{height:100%}
    
    </style>
    </head>
    <body>
    <div id="outer">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Zealot pozmu's Avatar
    Join Date
    Jul 2001
    Location
    Poland/ Warsaw
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thx, the second solution is what I was looking for (however I managed to find it on my own).
    But my question is still open, why it's impossible to get 100% min-width min-height for body in Opera?
    Last edited by pozmu; Dec 30, 2007 at 07:52.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    100% height is a tricky subject

  6. #6
    SitePoint Zealot pozmu's Avatar
    Join Date
    Jul 2001
    Location
    Poland/ Warsaw
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.)

    so it's not possible to achieve min-height 100% for body
    Yes you can in the same way that I explained before.

    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    html{
        height:100%;
        background: url(images/lbg.gif) repeat-y left top;
    }
    body{
        min-height:100%;
        background: url(images/rbg.gif) repeat-y right top;
    }
    p{margin:0;padding:1em 0 0 50px}
    
    * html body{height:100%}
    </style>
    </head>
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>
    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

  8. #8
    SitePoint Zealot pozmu's Avatar
    Join Date
    Jul 2001
    Location
    Poland/ Warsaw
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    It was some kind of my error, because I tried to get desired body height with exactly same method and it didn't work, but now it works... Thank you very much again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •