SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image and Page Height Problem

    Hi All

    Haven't posted to this forum for a long time, hope everyone is well.

    I'm launching a site next week and I just need to fix a page height problem. I've spent a few hours on this, but haven't reached a solution.

    I want the content of my webpage to always have the minimum height of the browser window eg : -

    http://joomla1.manor-road.ox.ac.uk/index.php/media.html

    However, on a page with more content, : -

    http://joomla1.manor-road.ox.ac.uk/index.php/home.html

    the background image does not follow the page content all the way to the end of the page.

    How can I get the background image to always follow through regardless of the amount of page content? I've attached some of the relevant css settings

    Code CSS:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	background: url(../images/background.png) repeat fixed;
    	margin: 0px;
    	padding: 0px;
    	line-height: 135%;
    	  height:100%;
    }
     
    html {
    	padding: 0px;
    	margin: 0px;
        height:100%;
    }
     
    #site_background {
    	width: 988px;
    	margin: 0px auto;
    	height:100%;
     
    }
     
    .background_1 {
    	background:  url(../images/background_1.gif) repeat-y top center;
     
     
    }
     
    #content_background {
    	width: 938px;
    	margin: 0px auto;
    	padding: 0;
    	background: #111316;
    	 height:100%;
    	 position:relative;
     
    }
     
     
    #site_wrapper {
    	width: 888px;
    	background: #ffffff;
    	padding: 0px 25px;
    	text-align: left;
    	margin: 0px auto;
     position:relative;
     min-height:100%;
    }

    Thanks for any help with this

    Didcot84

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    add overflow:hidden to expand backgroud-image and remove height:100%

    Code:
    #site_background {
    	width: 988px;
    	margin: 0px auto;
    	height:100%; /*remove this height*/
    	overflow:hidden;
    	
    }
    
    .background_1 {
    	background:  url(../images/background_1.gif) repeat-y top center;
    	overflow:hidden;
    }
    you can use overflow:auto also for expanding your background image


    vineet
    Last edited by vinpkl; Feb 11, 2010 at 07:29. Reason: typo

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Vineet

    Thanks very much for this post.

    Unfortunately, when I apply your solution, the pages with less content lose their 'mimimum height' eg : -

    http://joomla1.manor-road.ox.ac.uk/index.php/media.html

    This is the vicious circle that I have been trapped on!

    Is there any way to get them both working as per my requirements?

    Thanks

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just set min-height:100%; instead of height:100% . Of course keep overflow:hidden;

    Then feed IE6 some support
    * html #element{height:100%;}

    It treats height as min-height
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Reese

    The problem is that this only means that the background image is 100%, but the white background

    Code CSS:
    #site_wrapper {
    	width: 888px;
    	background: #ffffff;
    	padding: 0px 25px;
    	text-align: left;
    	margin: 0px auto;
     position:relative;
     height:100%;
    }

    Only follows the page content. Eg please look at

    http://joomla1.manor-road.ox.ac.uk/index.php/media.html

    Sorry to be a pain here, I keep going round and round in circles myself, thanks for all of the help received so far.
    Last edited by didcot84; Feb 11, 2010 at 09:32. Reason: missed url

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi Ryan

    while answering this thread i came to a confusion that i used and tested
    Code:
    overflow:hidden
    and also
    Code:
    overflow:auto
    and both gave the same results. is "auto" and "hidden" properties same.

    why did both gave same results. i mean in both cases the background image got extended.

    vineet

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    To contain floats all that is needed is an overflow (auto/hidden/scroll). It doesn't matter which.

    hidden is the preferred choice because in overflow:auto; IE will someetimes show scrollbars if it thinks the text (or content) is wider then it is. Then scrollbars appear and we don't want that

    So hidden is preferred now. The actual overflow:auto (what it's suposed to do (show scrollbars once content meets the width/height set)) isn't waht we are after. We are after the side effect-containing the floated elements, which both overflow:auto;/hidden; do
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    The point seems to be that once a container is supposed to actually do something special with "overflow" then it means the container must be able to "see" its children. So the rules change over to what static boxes with static children do.

    I often have trouble with overflow: hidden and 100% height pages (even min-height). Mostly with in-page skip links. For IE6 you can just tell it specially "overflow: visible" to undo the "hidden", but if other browsers find some problem with the height and the overflow, then another enclosing method might be better (but overflow is the easiest way to solve enclosing problems so I'd stick with it and just be aware of possibly problems so you can switch to another solution if needed).

  9. #9
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    To contain floats all that is needed is an overflow (auto/hidden/scroll). It doesn't matter which.

    hidden is the preferred choice because in overflow:auto; IE will someetimes show scrollbars if it thinks the text (or content) is wider then it is. Then scrollbars appear and we don't want that

    So hidden is preferred now. The actual overflow:auto (what it's suposed to do (show scrollbars once content meets the width/height set)) isn't waht we are after. We are after the side effect-containing the floated elements, which both overflow:auto;/hidden; do
    hi Ryan,

    thanks for the explanation.

    vineet

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by didcot84 View Post
    Thanks for the reply Reese

    The problem is that this only means that the background image is 100%, but the white background

    Code CSS:
    #site_wrapper {
        width: 888px;
        background: #ffffff;
        padding: 0px 25px;
        text-align: left;
        margin: 0px auto;
     position:relative;
     height:100%;
    }

    Only follows the page content. Eg please look at

    http://joomla1.manor-road.ox.ac.uk/index.php/media.html

    Sorry to be a pain here, I keep going round and round in circles myself, thanks for all of the help received so far.

    Hi,

    If I understand correctly then you can't do what you are trying to do. You cannot have multiple elements stretching down to 100% in css - only tables cells can do that (sometimes).

    Apart from the height:100% in html and body you cannot use height:100% anywhere else and you can only use min-height:100% on the first wrapper on the page and nowhere else either.

    In essence the first min-height:100% element creates the 100% height effect which it can achieve via the 100% height set on html and body. Further nested elements cannot achieve any height based on this min-height element because that will collapse to height:auto.

    You cannot use height:100% again because that would mean the layout would never grow and you would be trapped forever within the initial viewport.

    It's a catch 22 situation and cannot be done like you have tried

    Remove all the height:100% from your code apart from the ones that are used for html and body.

    Use min-height:100% on the first wrapper only.

    You have one shot at creating a 100% initial layout and it all has to be done on that first wrapper. If you want the white background to travel down the page to the bottom then you would need to add a white background to the image that creates the borders.

    e.g. This one:

    http://joomla1.manor-road.ox.ac.uk/t...ckground_1.gif

    At present it has a gray background but if you changed it to white then it would travel to the bottom.

    It actually seems to me that you are looking for a sticky footer effect and that is shown in this example.

    Apologies If this was not what you were trying to do

  11. #11
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All

    Apologies, I left work early on Thursday because I was ill, and I wasn't in the office on Thursday,

    Thank you Paul o B for your help, that post completely explains why I kept going round in circles. I will apply your suggestion and see if it works.

    Thanks to everyone for your help, I'm just off to lunch, but I'll let you know afterwards what the results were.

  12. #12
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All

    Just to update you.

    I managed to get this working, as per the advice of Paul O B.

    If anyone is interested, I found a very helpful tutorial at http://ryanfait.com/sticky-footer/

    Thanks

    Daniel

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by didcot84 View Post
    Hi All

    Just to update you.

    I managed to get this working, as per the advice of Paul O B.

    If anyone is interested, I found a very helpful tutorial at http://ryanfait.com/sticky-footer/

    Thanks

    Daniel
    Ryan Fait's sticky footer method - a method invented by Paul O'Brien over 7 years ago - is outdated. For the sake of cross-browser compatibility, this sticky footer version is much better supported.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As Kohoutek mentions breifly Ryan Faits sticky footer is broken badly in IE. He gave you the link to the most recent sticky footer and is very reliable and stable.

    The problem with Ryan Faits is IE
    Code:
    .wrapper {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    }
    He is trying to trick IE there. The sticky footer should not have a bottom margin (a top negative margin instead) and the only height/min-height rule there should be the min-height:100%.

    Then Ie6 should be fed the height:100% via the star html hack (* html #element{height:100%;})
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    What I never liked about Ryan's sticky footer was the addition of an empty div called "push". It seemed no better than clearing divs.

    Off Topic:

    As Kohoutek mentions breifly Ryan Faits sticky footer is broken badly in IE. She gave you the link to the most recent sticky footer and is very reliable and stable.
    Fixed : )

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I knew that .

    THe .push element is unnecessary and is attributed to the bad way his sticky footer is set up. Had he done it correctly there would be no need for that extra element
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Exactly.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    What I never liked about Ryan's sticky footer was the addition of an empty div called "push". It seemed no better than clearing divs.
    What I never liked was the fact that it never worked in IE7, IE8 and Opera

  19. #19
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I never used it; only looked at the code on the site... I never knew it didn't work in all browsers!

  20. #20
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just looked at this post again, wasn't expecting a flurry of responses!

    I'll change the css over, thanks for this note, to be honest it worked for me in IE8, thats just reminded me that I need to get back into the habit of testing earlier versions.

    I've really appreciated everyones help and comments with this

    Didcot84

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    We mean that if you try and grab the bottom of the browser window (not maximized) and drag it up and down the sticky footer won't update . Same as with Opera.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    ^and sometimes I wonder if that matters so much... I may be wrong in expecting people to hit "refresh" if their page goes goofy, but it's what I've been thinking lately.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    ^and sometimes I wonder if that matters so much... I may be wrong in expecting people to hit "refresh" if their page goes goofy, but it's what I've been thinking lately.
    None of my family would know to click refresh. They would have absolutely no idea and just think it was broken and go somewhere else.

    Able-bodied people need the same rights of accessibility as the disabled . If they want to resize the window then we should let them without having to make them do something else to fix it.


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
  •