Results 1 to 7 of 7

Thread: Designing a 100% background layout.

  1. #1
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Question Designing a 100% background layout.

    I'd like to know if there is a way to make the following work?

    Code:
    #content
    {
    	margin: auto;
    	width: 80%;
    	height:100%;
    	background:#C5A665;
    border-left: 7px solid #CDA439;
    border-right: 7px solid #CDA439;
    }
    By saying height:100% The broser dose not understand this and dose not seem to be able to make sense of it or know what to do with it.

    If you put a number in, in place of the 100% such as 500px it works but not 100%. Is there some kinda work around to make it understand that I would like it to take up 100% of the page? I'll give you an example page but in this instance it's not a very good example becasuse the data dose the job of filling the page and thus the background exstends to the bottom but for pages where I would like to use it and there is not enough text to extend it to the bottom of the page I need to know how to make this work. So here is the example:

    www.robinsden.110mb.com

    also if you have IE explorer could you let me know if my menu shows correctly for you. It dose not show right for me right now in IE only Firefox.

    Thanks.
    Last edited by keyboard; 11-14-2013 at 06:58 PM. Reason: Format: Code Tags [code][/code]

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    okay declare the height of the html and body before it so it knows. I think will do it

    Code:
    html {height: 100%;}
    body {
    background-color: #996600;
    background-image:url(../banner/mainbg.jpg);
    margin: 0 auto; 
    width: 100%;
    height: 100%; 
    border: none; 
    background-repeat: repeat-x;
    background-position:top, center;
    }
    
    #content
    {
    	margin: 0 auto;
    	width: 80%;
    	text-align: left;
    	background:#C5A665;
    border-left: 7px solid #CDA439;
    border-right: 7px solid #CDA439;
    }
    Last edited by bluewalrus; 03-09-2009 at 02:48 AM.

  3. #3
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Default

    On less I missed somthing, that's exactly what I have right now. Maybe I did not explain my self very good though. If I did not I am sorry about the confushion the part of the background that I am trying to make extend 100% is the solid light brown behind the text. If you view my index page you will see.

    http://www.robinsden.110mb.com/index.php

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    you have it in the reverse order or did. it reads from top to bottom so having in wrong order like say... in this order the content will be red
    background blue;
    background green;
    background red;
    However in this order it will be blue
    background green;
    background red;
    background blue;

  5. #5
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    But in this order it will be red:
    Code:
    background: red !important;
    background: green;
    Jeremy | jfein.net

  6. #6
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Default

    I am not sure how to do it but can I make say a sub class for the body.

    I already have the ferthest background color the one that fades. but for the one solid light brown one can I make a sub body class for it. and make it work that way?

    Ok I made a test page.

    http://robinsden.110mb.com/testpage.php

    there you can see the brown dose not continue all the way down the page. It only goes as far as the writting.
    Last edited by robin9000; 03-09-2009 at 03:35 AM.

  7. #7
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Okay here first post missed it cause code you put wasn't on your actual page.

    Code:
    /*background layout starts*/
    #content
    {
    	margin: 0 auto;
    	width: 80%;
    	text-align: left;
    	background:#C5A665;
    border-left: 7px solid #CDA439;
    border-right: 7px solid #CDA439;
    }
    
    html {height: 100%;}
    body {
    background-color: #996600;
    background-image:url(../banner/mainbg.jpg);
    margin: 0 auto; 
    width: 100%;
    height: 100%; 
    border: none; 
    background-repeat: repeat-x;
    background-position:top, center;
    }
    I said put it in this order:

    Code:
    /*background layout starts*/
    html {height: 100%;}
    body {
    background-color: #996600;
    background-image:url(../banner/mainbg.jpg);
    margin: 0 auto; 
    width: 100%;
    height: 100%; 
    border: none; 
    background-repeat: repeat-x;
    background-position:top, center;
    }
    #content
    {
    	margin: 0 auto;
    	width: 80%;
    	text-align: left;
    	background:#C5A665;
    border-left: 7px solid #CDA439;
    border-right: 7px solid #CDA439;
    height: 100%;
    }
    or you could

    Code:
    #content
    {
    	margin: 0 auto;
    	width: 80%;
    	text-align: left;
    	background:#C5A665;
    border-left: 7px solid #CDA439;
    border-right: 7px solid #CDA439;
    }
    
    html {height: 100%;}
    body {
    background-color: #996600;
    background-image:url(../banner/mainbg.jpg);
    margin: 0 auto; 
    width: 100%;
    height: 100%; 
    border: none; 
    background-repeat: repeat-x;
    background-position:top, center;
    }
    #content
    {
    height: 100%; 
    }

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
  •