Grow your CSS skills. Land your dream job.

[Solved] Problem with background-image going outside <div>

  • # July 12, 2009 at 4:42 pm

    Page without the middle section:
    http://arholemasters.com/damnit/brownstencil.html

    Working example of the problem:
    http://arholemasters.com/test9/brownstencil.html

    I think it’s fairly obvious what I’m trying to do here. The grassy background goes behind the middle box. The logo and the top of the nav bar is transparent and it all works until I add the middle section with a background.

    I want the middle section to have a background image that is repeated along the y axis, expanding itself out to the size of the browser (or more if there is more text). When I add the middle section and give it a background the image grows UP! instead of down, outside of the div box that I made for it. I don’t even see how that is possible since it is obviously outside the box. What the heck am I doing wrong? Also, why is there a space between the main body and the footer?

    Is the image that I want to repeat. If I take it out of the background image tag and have no background image then the header and footer are great.

    My wrapper:

    Code:
    div.maincontentwrapper {
    background-image:url(images/mainback.png);
    margin: 0 auto;
    height:inherit;
    width: 920px;

    }

    I have this wrapper for the background image and then I have another wrapper inside of it to control the text.

    Thanks for looking,
    - CE

    # July 12, 2009 at 4:54 pm

    Adding this after my header wrapper seems to solve the problem:

    Code:

    I’m not sure what it does but meh ok.

    Now I just need to get the spaces fixed.

    # July 12, 2009 at 5:07 pm

    You have a couple of mismatched div tags in there http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Farholemasters.com%2Ftest9%2Fbrownstencil.html

    As for the gap, it’s always best to start with a reset, now you are getting the browsers default 10px top and bottom margins on paragraphs.
    Add this for now:

    Code:
    p {
    margin: 0;
    }

    Also it’s always a good idea to tell the browser exactly what you want to repeat and where:

    Code:
    div.maincontentwrapper {
    background-image:url(images/mainback.png) repeat-y 0 0;
    margin: 0 auto;
    height:inherit;
    width: 920px;

    }

    # July 12, 2009 at 5:16 pm

    Thank you very much, everything is working now and it validates. I’ve been banging my head on this one for a bit now. I’ve learned alot in the last few days. I used to code everything in tables and this actually makes things so much better.

    -ce.

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

You must be logged in to reply to this topic.

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