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
    New Coder
    Join Date
    May 2008
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with div background image

    Here's my CSS code
    Code:
    #header {
        height: 60px;
        border-bottom: 2px solid black;
        background-image: url(images/hdr-bkg.png);
        background-repeat: repeat-x;
        /*background-color: fuchsia;*/
        z-index: 2;
    }
    In my HTML file I've created the header div, but the image won't show up in FF or IE. The path to the file is correct, what could be causing this?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Darkmatter5,
    Try replacing all those background lines with this:
    Code:
    background: #000000 url(images/hdr-bkg.png) repeat-x;

    Change the #000000 color or remove it, it's only black because I don't know what fucia is.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Where is your CSS file located relative to the image file, though? If you're linking to an external stylesheet from your HTML file like so:

    Code:
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    then your CSS file is up one directory level (/css) relative to the HTML file, so in referencing the background image, you'll need to tell the CSS file to go back down one level:

    Code:
    background-image: url("../images/hdr-bkg.png");
    If that doesn't fix it post your whole code (HTML and CSS).
    matt | design | blog

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Both suggestions helped the ../ post fixed the image not showing, but the other post helped consolidate my code. Thanks!!


  •  

    Posting Permissions

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