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_RightThe 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.
The topic ‘Fluid Background for Each Post’ is closed to new replies.