Background image and color - css

Discussion in 'Web Design and Development' started by mat4020, Sep 27, 2008.

  1. mat4020 macrumors member

    Joined:
    Apr 26, 2007
    Location:
    Zhuhai, China
    #1
    Hello everyone,

    I need a bit of help! I've been search all over for an answer to this question and I cant seem to find it. I'm fairly sure it's something easy and I've just got something little messed up.

    What I'm trying to do:
    - have a background image that is the correct width of my div
    - have a background color fill in the area under the background image if the content is longer than the bg image
    - have the div a minimum of the height of the bg image (600px)

    Right now the bg color doesn't fill in below the bg image.

    The xhtml - http://www.duvalschools.org/merrillroad/new/Merrill/
    The css - http://www.duvalschools.org/merrillroad/new/Merrill/default.css

    Look at #text

    I hope this makes sense. If it doesn't just ask and I'll try to clarify.

    Thanks,
    Matt
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    background-image cannot have its width adjusted with CSS. The image would need to be sized ahead of time. You could however put the img inside a div and place it underneath the content using z-index. Then you'd be able to adjust width and height of the img and the div around it.

    As part of a solution. If you move the footer div inside the content dive the background color (if applied to content) will extend to the bottom of the page, which is what I believe you want. The background image still shows up too doing this.
     
  3. mat4020 thread starter macrumors member

    Joined:
    Apr 26, 2007
    Location:
    Zhuhai, China
    #3
    I knew it was going to be something really easy. Thank angelwatt that work great!

     

Share This Page