Title: Fluid Background for Each Post
Last modified: August 18, 2016

---

# Fluid Background for Each Post

 *  [ptrinh](https://wordpress.org/support/users/ptrinh/)
 * (@ptrinh)
 * [19 years, 11 months ago](https://wordpress.org/support/topic/fluid-background-for-each-post/)
 * 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>
    <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.

The topic ‘Fluid Background for Each Post’ is closed to new replies.

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)

 * 0 replies
 * 1 participant
 * Last reply from: [ptrinh](https://wordpress.org/support/users/ptrinh/)
 * Last activity: [19 years, 11 months ago](https://wordpress.org/support/topic/fluid-background-for-each-post/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics