SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    design trouble how to set 2 backgrounds

    hi guys
    i have this site http://www.ceigenesis.com in which i want to set 2 backgrounds 1 for the html property (sky) and 1 for body (the pseudo grass) like this:


    the thing is that the body image is not being display, don't know why, this is the css rule:
    Code:
    body {
    	background:url(imgs/body_bg.png) repeat-x bottom; 
            font-family: Arial, Helvetica, sans-serif; font-size:12px; }
    that's the fist trouble, the other thing is how do i make to keep the footer at the bottom so it can be align whit the body image, i tried setting the footer div as position absolute bottom 0 and it work, but now the content goes beyond the footer (don't know why, i assume that setting it at bottom 0 it would stay fixed to the bottom but when u scroll down is left behind )
    any help or critic is welcome
    thanks

  2. #2
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what I know, css will render the page when it loads, that's why if you scroll then you get that problem. Also with the displaying of the footer, it might sound barberic, but just placing a div at the bottom with the background being an image might work as well. Just a suggestion.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To make the body background show you must have content in flow in it, the absolute position on the wrapper takes all content out of flow so there is nothing that extends the body dimensions. It is zero and no background shows. Change the wrapper centering method and it will show at the documant page bottom.
    Code:
    #wrapper {
    	margin: 0 auto;
    	width: 824px;
    	overflow: hidden;
    	background: url(imgs/wrapper_bg.png) repeat-y;
    }
    Happy ADD/ADHD with Asperger's

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... the other thing is how do i make to keep the footer at the bottom ...
    The best method is invented by Paul O' Brien and explained in the CSS FAQ in post #3, also explained in the source-code here.

    Adding a viewport-wide container for the body background is needed as the body now must stay at viewport height surpassing the html/viewport height to the wrapper which now can be set in percent referring to body/html/viewport. (This three-part chain can't be extended more, only direct children to the body can get the reference.)

    Here is how it works in your case:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    html, body{ 
    	margin:0; 
    	padding:0;
    	height:100%; /* set the viewport height */
    	background:url(imgs/html_bg.jpg) repeat-x;
    }
    #wrapper{
    	margin:-83px auto 0; /* move wrapper up to show footer */
    	width:824px; /* enclose all floats inside by hasLayoput in IE6 */
    	min-height:100%;
    	overflow:hidden; /* enclose all floats inside in good browsers */
    	background: url(imgs/wrapper_bg.png) repeat-y;
    }
    * html{height:100%; overflow:visible} /* height works as min-height in IE6 when overflow is visible */
     
    #head_wrap {
    	border-top: 83px solid; /* soak up the wrapper negative top margin */
    	height:201px;
    	background:url(imgs/main_wrap_bg.png) 100% 100% no-repeat;
    }
    #main_wrap {
    	background:url(imgs/main_wrap_bg.png) 100% 100% no-repeat;
    }
    #foot_wrap{ 
    	clear:both; /* optional as the wrapper has cleared its float */
    	background:url(imgs/body_bg.jpg) 0 100% repeat-x; /* will strech viewport wide */
    }
    #foot_wrap div{
    	margin:0 auto; /* auto center the footer inside  div*/
    	width:824px;
    	height:83px;
    	background:url(imgs/footer_bg.jpg) no-repeat;
    }
    </style></head><body>
     
    <div id="wrapper">
     
    	<div id="head_wrap">
    		Header-stuff
    	</div>
     
    	<div id="main_wrap">
    		Content-stuff
    	</div>
     
    </div>
     
    <div id="foot_wrap">
    	<div></div>
    </div>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mate, it work perfectly


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
  •