WordPress.org

Ready to get started?Download WordPress

Forums

Fluid Background for Each Post (1 post)

  1. ptrinh
    Member
    Posted 8 years ago #

    What I'm trying to do is set each of my posts in my blog on a fluid background, which means the background should be extendable up/down as well as left/right.

    The background I've made is split into 9 sections:
    1. Top_Left, Top_Center, Top_Right
    2. Center_Left, Center_Center, Center_Right
    3. Bottom_Left, Bottom_Center, Bottom_Right

    The center portions of 1-3 are repeated for the left/right extension, and the Center (2) sections are used for the up/down extension.

    Here is one way to do it for the entire page:

    Set all slices as position:absolute. Set the Left/Right sections using a Left/Right position setting. Then for the center elements, use height:100% or width:100%.

    The problem is that I don't know how to do it for EACH post.

    Here is the relevant code:
    [CODE]
    <div id="post-info">

    <div class="post_topleft"></div>
    <div class="post_topcenter"></div>
    <div class="post_topright"></div>

    <h2 class="post-title">" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></h2>
    <h2 class="post-date"><?php the_time('D j M Y'); ?></h2>
    <br/>
    </div>

    <div class="post-content">

    <div class="post_centerleft"></div>
    <div class="post_centercenter"></div>
    <div class="post_centerright"></div>
    <div class="post_bottomleft"></div>
    <div class="post_bottomcenter"></div>
    <div class="post_bottomright"></div>

    <?php the_content(); ?>
    <p class="post-info">
    <?php wp_link_pages(); ?>

    <?php comments_popup_link('No Comments', '1 Comment', '[%] Comments'); ?> 
    <!--

    <?php trackback_rdf(); ?>
    -->
    <div class="post-footer"> </div>

    </div>
    [/CODE]

    [CODE}
    .post_topleft {
    position:absolute;
    left: 0px;
    width: 252px;
    height: 70px;
    background: #fff url('img/post_topleft.gif');
    z-index:-1;
    }
    .post_topcenter {
    position:absolute;
    left: 252px;
    width: 100%;
    height: 70px;
    background: #fff url('img/post_topcenter.gif') repeat-x;
    z-index:-1;
    }
    .post_topright {
    position:absolute;
    right: 0px;
    width: 187px;
    height: 70px;
    background: #fff url('img/post_topright.gif');
    z-index:-1;
    }
    .post_centerleft {
    position:absolute;
    top:70px;
    left: 0px;
    width: 236px;
    height: 100%;
    background: #fff url('img/post_centerleft.gif');
    z-index:-1;
    }
    .post_centercenter {
    position:absolute;
    top:70px;
    left: 236px;
    width: 100%;
    height: 100%;
    background: #fff url('img/post_centercenter.gif');
    z-index:-1;
    }
    .post_centerright {
    position:absolute;
    top:70px;
    right: 0px;
    width: 240px;
    height: 100%;
    background: #fff url('img/post_centerright.gif');
    z-index:-1;
    }
    .post_bottomleft {
    position:absolute;
    bottom:0px;
    /*left: 0px;*/
    width: 87px;
    height: 81px;
    background: #fff url('img/post_bottomleft.gif');
    z-index:-1;
    }
    [/CODE]

    I left some stuff out, but I hope you can fill in the holes.

Topic Closed

This topic has been closed to new replies.

About this Topic