Grow your CSS skills. Land your dream job.

Background image won’t show up, help, please

  • # January 29, 2009 at 11:16 pm

    Here’s the site:

    http://www.digiscrapschool.com

    Now, I have three background, the first in the body, the second in an outer div and the third in an inner div. The outer div wraps the header and footer, the inner one should just fill in between the header and footer. Well, when I close that div before the footer, the background image will not show up, although if you right-click and view background image, it does show the correct image. If I close it after the footer, the background image shows up, but because that inner div is not as wide as the footer image, that causes a problem. It NEEDS to end before the footer, but it just refuses to display properly if I do that.

    Could someone please help me understand what the problem is here? I had the exact same issue on another custom WP theme and just worked around it, but I can’t do it with this one.

    Thanks in advance!!

    # January 30, 2009 at 1:02 am

    give the necessary files

    # January 30, 2009 at 2:51 am
    "Ramesh" wrote:
    give the necessary files

    This is not the first time you have requested this, and it’s completely unnecessary.

    To the matter at hand…

    You simply need to put a clear before the footer div. You can either put this before the footer div:

    Code:

    Or put this before the footer div:

    Code:

    And if you go the class="clear" option (which I recommend), put this in your CSS file:

    Code:
    .clear {
    clear:both;
    }

    Here’s a post Chris had about Floats and Clears:
    http://css-tricks.com/all-about-floats/

    # January 30, 2009 at 7:12 am

    Thank you for your help…maybe I am not understanding what you are suggesting, but here’s what my footer looks like when I add the clear:

    Code:

    I also added the code to the CSS as you suggested. It didn’t seem to make any difference. I do have a clear: both in the CSS for the footer…is that why this didn’t work?

    Thank you again!

    # January 30, 2009 at 11:08 am

    Interesting, in FF on my Mac last night the background wasn’t going all the way down, but if you’re saying you had a clear:both in the footer the whole time, then I have no idea why it wasn’t working properly last night.

    You shouldn’t necessarily need the clear div if you have a clear:both in your footer, but I did notice a positioning problem with the footer in FF3 on WIN, the following cleaned up code seems to fix it, but I can’t test the updated code in IE:

    Code:
    #footer {
    text-align:center;
    clear:both;
    height: 89px;
    background:url(images/footer.gif) center bottom no-repeat;
    padding-top: 20px;
    }
    # January 30, 2009 at 11:22 am

    Thank you :) .

    The background wasn’t going all the way down last night, but when I moved the closing div tag, it made it show up…but it also made the div go all the way to below the footer. The div in question has a width of 900 pixels and the footer graphic is wider than that, that’s why it’s being pushed over like it is. I really want that inner div that contains the background to end before the footer, but if I close it before the footer, the middle background image disappears…that’s the mystery :) . If I follow your suggestion and make the change you suggest, what happens is that the footer does center up, but the middle background image extends past the footer background image, so the rounded corners of the footer are on top of the background image…does that make sense? That middle background image has to stop before the footer, but I can’t figure out why doing that makes the image disappear altogether.

    Thanks for the help so far, I appreciate it!

    # January 30, 2009 at 1:15 pm
    "TheDoc" wrote:
    "Ramesh" wrote:
    give the necessary files

    This is not the first time you have requested this, and it’s completely unnecessary.

    To the matter at hand…

    You simply need to put a clear before the footer div. You can either put this before the footer div:

    Code:

    Or put this before the footer div:

    Code:

    And if you go the class="clear" option (which I recommend), put this in your CSS file:

    Code:
    .clear {
    clear:both;
    }

    Here’s a post Chris had about Floats and Clears:
    http://css-tricks.com/all-about-floats/

    Okay, thanks to another set of eyes, I put the div class clear, then the closing div tag, both before the footer and it is fixed…now if I just understood why. I’ll go read Chris’ article again and maybe I’ll "get it".

    Thanks, all!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".