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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Image

    I'm trying to add a background image to a div but it's not working. I want to add it to my dateBottom class.
    Code:
    <div id="d6_28" onclick="return door(this);">
    <div class="dateTitle">July 28<sup>th</sup></div>
    
    <div class="open" >
    	Give me feedback through the feedback link. Many more features are too come as I figure out a way to impliment them. Enjoy.
    </div>
    
    <div class="dateBottom"></div>
    
    </div>
    Style:
    Code:
    .dateTitle{
    background-image:url('dateTop.gif');
    background-repeat:no-repeat;
    color:#006699;
    }
    
    .dateBottom{
    background-image:url('dateBottom.gif');
    color:#006699;
    }
    
    .open{
    background-image:url('dateMiddle.gif');
    background-repeat:repeat;
    }
    
    .closed{
    }
    The dateBottom class isn't getting the dateBttom.gif, instead it is getting the dateMiddle.gif. I've tried with and without text in the dateBottom div. I can't figure out what I've done wrong.

    Linkage : http://troop1910.ithium.net

  • #2
    New Coder
    Join Date
    Dec 2004
    Location
    Ontario, Canada
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it to display in FF by adding a height and width to the .dateBottom DIV the same dimensions as the image..
    Code:
    .dateBottom{
    height: 45px;
    width: 555px;
    background-image:url('dateBottom.gif');
    color:#006699;
    }

    Nite

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    It's an empty div, so there's no room for the background image to be displayed.

    Change this:

    .dateBottom{
    background-image:url('dateBottom.gif');
    color:#006699;
    }

    To this:

    .dateBottom{
    background:url('dateBottom.gif') no-repeat top left;
    color:#006699;
    height: 45px;
    }

    The "no-repeat" and the positioning are just in case some content gets added; if the div expands the bottom image won't tile.

    Edit: Doh, that's what I get for typing too much

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Height! That's it. Why didn't I think of that. I had the min-width set to 100%.
    Thanks guys.


  •  

    Posting Permissions

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