What I'm trying to do is position my background image with css so it looks as if the bottom of my pageContent has torn paper for a border.

Is there any way to further position the image after I've defined the position as 'bottom center'. I need the bottom border of every page to be the torn paper image.

HTML:
Code:
Code:
<div id="content-middle" style="height: 682px;">
<div id="pageContent" class="container">
<div> </div>
<h2 class="titleHeader"> Products </h2>
<div class="pageNote">
<p>
<input height="128" width="730" type="image" src="header image" longdesc="undefined">
</p>
<div style="font-size: 25px; padding-left: 15px;">
<img class="disp1" alt="Sea of Copiers" src="description image" style="">
<div>
<a class="hlink1" href="">Multifunctional Printers/Copiers</a>
</div>
<br>
<div>
<a class="hlink1" href="">Facsimile</a>
</div>
<br>
<div>
<a class="hlink1" href="">Printers</a>
</div>
<br>
<div>
<a class="hlink1" href="">Large Format Printers</a>
</div>
<br>
<div>
<a class="hlink1" href="">Scanners</a>
</div>
</div>
</div>
</div>
</div>
CSS:
Code:
#pageContent{
    width: 749px;
    border: 1px solid #000000;
    border-right: 0px;
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
    background-image: url("torn paper image");
    background-repeat: no-repeat;
    background-position: bottom center;
    margin: 0 auto;
    padding-bottom: 6px;
}