Child divs blocking visibility of parent div background

2 Views

I am trying to tweak a wordpress site but can’t seem to get one of my parent div’s backgrounds to be visible through the child divs on top. I’ve got the background image set for #main. The image I’m using fades to white at the bottom but, in the rendered page, I can only see about the top 23 pixels or so before the rest is blocked…I think by #primary.

The site uses a child theme based on Responsive and can currently be viewed here. I would copy/paste code for your convenience but I’m no longer certain what part of the code is responsible for what I’m (not) seeing. So I apologize in advance if this is not enough information to go on :-/

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Looks to me like you have a float problem and the div#main is collapsing. Try one of the various clear-float techniques to prevent that.

    For example, try #main { overflow: hidden } as a test – that will normally prevent the collapse.

  2. Classic clear fix issue. Give #main an overflow:hidden or try the micro clear fix if any content is spilling out of the box.

    #main {
    background: url("http://wp.massosteopathic.org/wp-content/uploads/2013/02/headerhand-contd.jpg") no-repeat scroll 0 0 transparent;
    clear: both;
    overflow: hidden;
    padding: 1.625em 0 0;
    z-index: 1;
}

  3. The #main div is only 24px high. This is because all child divs are floating.

    add a 

    <div class='clear'>

    with

    .clear { clear: both}

    just before the closing tag of your #main