Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2007
    Location
    Maine
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question tiling a background image in a div

    I am trying to add a tiled background to the space beneath my left navigation bar so that it will expand to fill the space no matter the length of the page. The css I am using for the div tag is:

    #bgBox{
    border: none;
    background-color: #676f60;
    background-image:url(Images/glossyback5.gif);
    background-repeat: repeat;
    padding: 20px
    padding-left: 180 px
    }

    I can see the tiled background behind my image when I look at it in design view in Dreamweaver, but it does not display in any browser, nor does it expand to fill the space. I am new to doing layout with CSS, so it's very possible the answer is an obvious one that I'm just not getting. Any help would be appreciated!

    Here's the link to my template page: http://www.cape.k12.me.us/tml/homepage/template.html

    Thanks!

    Rachel
    Rachel Q. Davis
    Children's Librarian
    Thomas Memorial Library
    Cape Elizabeth, ME 04107

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Just so you know, that id can be shortened to read:

    Code:
    #bgBox{
    border: none;
    background: #676f60 url(Images/glossyback5.gif) repeat;
    padding: 20px
    padding-left: 180 px
    }
    To get the background to repeat the height of your page you will need to set the height of the div to 100% and all of it's parent elements height to 100% too. Without setting a hieght it will only repeat as far as the content that expands the div as divs take up all the width by default, but only the height of the content within
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add the code below, if you want to to "tile" across the div. Should repeat on x and y axis.

    Code:
    background-repeat: repeat;

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by Papa View Post
    Add the code below, if you want to to "tile" across the div. Should repeat on x and y axis.

    Code:
    background-repeat: repeat
    She was already using that, but it would only repeat as far as the div stretched in height and width... see post above as to why your method would change nothing
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Opps... sorry I jumped the gun

  • #6
    New Coder
    Join Date
    Dec 2007
    Location
    Maine
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks. I've set the div height to 100% in that div and the ones in which it is contained, but no luck. I must be missing something!

    Rachel
    Rachel Q. Davis
    Children's Librarian
    Thomas Memorial Library
    Cape Elizabeth, ME 04107

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There are 22 markup errors on the page.
    There are 14 css errors.

    W3 validator.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New Coder
    Join Date
    Dec 2007
    Location
    Maine
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, Frank. I had no idea there was a tool out there that would pinpoint coding errors like that. I now have a Valid XHTML 1.0 Strict page! My gradient background now shows up, but my div does not expand to fill 100% of the length of the page. I think it must be a CSS error. Any ideas?

    Rachel
    Rachel Q. Davis
    Children's Librarian
    Thomas Memorial Library
    Cape Elizabeth, ME 04107

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts

  • #10
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    You can't get a div's height to match that of another. Unless you give it a specific height in pixels, it's only going to span the height of the content in it.

    This should help.

    Put a wrap around the sidebar and main. So the layout is built basically like this:
    Code:
    <div id="container">
    
    <div id="header">Header Content</div>
    <div class="subheader">Subheader Content</div>
    <div id="wrap">
        <div id="sidebar">Sidebar Content</div>
        <div id="main">Main Content</div>
    </div>
    <div id="footer">Footer Content</div>
    
    </div>
    Add this to your CSS:
    Code:
    #wrap {
        background: #FFF url(Images/glossyback5.gif) repeat-y;
        width: 779px;
        /* add any other propertied you may want */
    }
    #wrap:after { 
        content:"."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden; 
        overflow: hidden;
    }
    * html #wrap { 
        height:1&#37;;
    }
    The #wrap:after and * html #wrap bits are only necessary if the sidebar and/or main divs have float properties. Hope it does what you want. I haven't tested with IDs, only the clearfix technique. Should work though..
    Last edited by Majoracle; 12-16-2007 at 01:24 AM.

  • Users who have thanked Majoracle for this post:

    rqdavis (01-08-2008)

  • #11
    New Coder
    Join Date
    Dec 2007
    Location
    Maine
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks so much--that did the trick! I'm very grateful!

    Rachel
    Rachel Q. Davis
    Children's Librarian
    Thomas Memorial Library
    Cape Elizabeth, ME 04107


  •  

    Posting Permissions

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