Repeating background tile with a specific height

The other day I was working on a site that used curvy lines to surround content on the site instead of the more usual straight-line boxes around content.

Up until that point the content on the site was fairly static.

However the new addition to the site was a blog and so the blog articles would be of variable length and so too were the number of comments for every article.

So the challenge was to ensure the curvy lines always connected up at the bottom of the container.

Here is a quick peak at the design:

Here is the html code

<div class="blog-box-container">
 <div class="blog-box-container-top"></div>
 <div class="blog-box-container-mid" style="min-height: 450px">
 <div class="blog-box-container-padding">
 <h1>Here is a heading</h1>
 <p>Here is some content</p>
 </div>
 </div>
 <div class="blog-box-container-bottom"></div>
</div>

Here is the css:

.blog-box-container{
 width: 847px;
 margin: 22px auto 0 auto;
}

.blog-box-container-top{
 background: url('img/top.png') no-repeat;
 height: 82px;
}

/* Use the "resizeBoxes" jquery script
 to ensure all elements with this class are multiples of
 the height of the background image used */
.blog-box-container-mid{
 background: url('img/middle.png') repeat-y;
}

.blog-box-container-bottom{
 background: url('img/bottom.png') no-repeat;
 height: 22px;
}

.blog-box-container-padding{
 padding: 1px 15px;
 position: relative;
}

To solve this problem I used a JavaScript function to ensure the middle panel always had a height that was a multiple of the tile background image to be used.

Here is the JavaScript:

// This function will ensure all matched elements have a height
// that is a multiple of the ideal height specified.
// If we have a repeating tiled background of a specific height
// this will ensure the full tile is shown.
function resizeBoxes(selector, idealHeight) {
 var elements = $(selector).each(function () {

$(this).css("height", "auto"); // need to clear any preset height on the element first

var height = $(this).height();
 var remainder = height % idealHeight;

if (remainder != 0) {
 var divisor = parseInt(height / idealHeight) + 1;
 var newHeight = divisor * idealHeight;
 $(this).height(newHeight);
 }
 });
}

So to use the JavaScript function you just call it like this on the page:

$(function () {
 resizeBoxes(".blog-box-container-mid", 172);
 });

I hope this code helps someone else out who faces a similar problem.

‹ MVC Logging Part 6 – Controller / Views

Conditional Validation in ASP.NET MVC 3 ›

Tagged with: css, jquery
Posted in Layout