WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] background image ... stops! (15 posts)

  1. dannybcastillo
    Member
    Posted 7 years ago #

    I have coded my css for a background image to create a dropshadow effect on my local site. The problem is the background image stops after my menu bar in the header. I told the container div to clear: both; by that didn't help. Any help would be great.

    Click here to see an Image of the problem

    here's my div layout

    page div

    - header div
    - header ends

    -container div

    -- content div
    --- content ends

    -- sidebar div
    -- sidebar ends

    - container ends

    page ends

    footer div
    footer ends

  2. Samuel B
    moderator
    Posted 7 years ago #

    Your layout looks fine. Do you have the necessary definitions in the stylesheet fo background? IOW, for the body, sidebar, footer, etc.?
    I can't make out much from the screenshot...it says hotlinking not allowed. :>)

  3. dannybcastillo
    Member
    Posted 7 years ago #

    http://www.dannycastillo.com/wp/?p=116
    Try this link to see the image.

  4. dannybcastillo
    Member
    Posted 7 years ago #

    I am sorry, but I don't know what IOW means?

  5. vkaryl
    Member
    Posted 7 years ago #

    "in other words"

  6. dannybcastillo
    Member
    Posted 7 years ago #

    :o, I see.


    body {
    font-family: Arial, Helvetica, Sans-Serif;
    }

    #page {
    background: url(http://localhost:8888/artclub/wp-content/themes/default/images/dropshadow.gif) repeat-y 50% 0;
    margin: 0 auto;
    padding: 0;
    width: 844px;
    }

    #header {
    margin: 0 auto;
    width: 800px;
    }

    #container {
    clear: both;
    margin: 0 auto;
    width: 800px;
    }

    .narrowcolumn { /* this class is for the content div */
    float: left;
    padding: 10px;
    width: 580px;
    background: #eee;
    }

    #sidebar {
    float: left;
    padding: 10px;
    width: 180px;
    }

    #footer {
    clear: both;
    margin: 10px auto 40px auto;
    width: 800px;
    }

  7. vkaryl
    Member
    Posted 7 years ago #

    What happens if you change the positioning of the dropshadow? I'm not sure 50% 0 makes sense....

  8. dannybcastillo
    Member
    Posted 7 years ago #

    It worked fine, until I told narrowcolumn and sidebar to float left. But both are in contatiner div. I checked to see of the container div was clearing the two floating divs [sidebar / content], it does not. That's why I am confused.

    50% {x axis} aligns the center of the image to the center of the page.
    0 {y axis} assures the images is plush with the top of the header.

  9. Doodlebee
    Member
    Posted 7 years ago #

    setting the "container" div to clear both isn't going to work. If I were you, I'd adjust it to be more like this:

    page div

    - header div
    - header ends

    -container div

    -- content div
    --- content ends

    -- sidebar div
    -- sidebar ends

    footer div
    footer ends

    - container ends

    page ends

    then, in your stylesheet, set your footer to clear both.

  10. dannybcastillo
    Member
    Posted 7 years ago #

    I want the image only repeating to the footer. Then It should stop. I don't want the footer to have a background image.

  11. Doodlebee
    Member
    Posted 7 years ago #

    Then put in a clearing div. Leave the footer where you have it, and have some sort of clearing element in place of where I said to move the footer.

  12. dannybcastillo
    Member
    Posted 7 years ago #

    page div

    - header div
    --- header ends

    -container div

    -- content div
    --- content ends

    -- sidebar div
    --- sidebar ends

    -- clear div
    --- clear ends

    - container ends

    page ends

    footer / ends

    I try that with the clear div set to clear both. No results.

  13. Doodlebee
    Member
    Posted 7 years ago #

    Do you have an actual link to the page where this is happening? Anything we say here is pretty much just guesses unless we can actually see the site...

  14. dannybcastillo
    Member
    Posted 7 years ago #

    http://pastebin.com/774474
    html source

    Hope this help you. It is all being done local.

  15. dannybcastillo
    Member
    Posted 7 years ago #

    Thanks doodlebee. Sorry, i typed <div ="clear"> and forgot the id before the =.

    Thanks everyone!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.