Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25437
    blackburd
    Member

    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

    #60556
    blackburd
    Member

    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.

    #60558
    apostrophe
    Participant

    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;

    }

    #60560
    blackburd
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.