javascript - force div height to nearest multiple of the background image height -

bit of tricky situation explain. overall image i'm trying lay under content div of website messy box grungy borders bend in , out.

what i've got far (irrelevant code removed)

<div class="content-top"><img src="content-top.png"></div> <div id="content"> <!-- wordpress loads content here --> </div> <div class="content-bottom"><img src="content-bottom.png"></div>  css: #content {   background: url("assets/images/content-bg.png") repeat-y scroll 0 0 transparent; } 

the content-bg.png image 300px high , repeatable image creating patterned border either side.

the problem content-bottom.png image looks right when placed @ end of 1 of these 300px tiles. if page content of height causes half of last background tile displayed lines don't match up.

typing doubt answer lies in css , instead i'll need javascript/jquery solution specifics of how i'm unsure.

here's asolution problem. expand content container next height multiple of 300.

plain javascript version

var e = document.getelementbyid('content'); var height = e.clientheight; var newheight = 300 * math.ceil(height / 300); e.setattribute('style', 'height: ' + newheight + 'px;'); 

demo

try before buy

jquery version

var e = $('#content'); e.css('height', 300 * math.ceil(e.height() / 300)); 

demo

try before buy