Forums

Repeating Background Image Doesn't extend to bottom of post (6 posts)

  1. JaredDetroit
    Member
    Posted 2 years ago #

    I am updating a theme to create an image that will repeat and display a "box" look around all of the posts and the sidebar. I have the width working fine but the height isn't extending to the end of the posts on the main "blog" page or the single post page.

    The box only extends to the bottom of the sidebar and not the bottom of the posts/post. If I remove the sidebar, the box only extends to the top of the blog posts. I need to extend the box to the end of the blog posts.

    I have 3 images: top of the box, the main part of the box, the bottom of the box.

    I am setting 2 divs in the header:
    <div id="stage_top"></div>
    <div id="stage" class="blog_stage">

    I am terminating the div and setting the bottom of the box in the footer.php:
    </div>
    <div id="stage_bottom"></div>

    The CSS is:
    #stage_top {
    background: url('../images/stage_top.jpg') no-repeat;
    height: 8px;
    width: 969px;
    margin-left: 10px;
    }

    #stage{
    background: url('../images/stage_bg.jpg') repeat-y;
    padding: 10px 10px 10px 16px;
    height: 370px;
    width: 969px;
    margin-left: 10px;
    }

    #stage_bottom {
    background: url('../images/stage_bottom.jpg') no-repeat;
    height: 20px;
    width: 969px;
    margin-left: 10px;
    }

    Thanks,
    Jared

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    A link to your site might help...

  3. JaredDetroit
    Member
    Posted 2 years ago #

    I'll move it out to a temporary site. It's currently in development on my local server.

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    In the meantime, do you have a wrapper div around both the post content and the sidebar?

  5. JaredDetroit
    Member
    Posted 2 years ago #

    Yes, the div starts in the Header and I'm closing it in the footer. I've counted the div tags that are open and that are closed and it's wrapping both the post content and the sidebar.

    To be clear, I'm not wrapping them both individually. I'm trying to wrap it all to have one big box going from top to bottom. I'm trying to match the website (non-wordpress).

    It's being uploaded to the test server. Hopefully that will be today.

  6. JaredDetroit
    Member
    Posted 2 years ago #

    While the files were getting uploaded I did some more research.

    I found the solution on this post: http://wordpress.org/support/topic/255669

    The fix was to set the background image to float: left. The background image now goes all the way to the bottom of the page and wraps the post content and sidebar.

Topic Closed

This topic has been closed to new replies.

About this Topic