Side Windows Repeating Graphics - How to Piece Together in CSS?

HTML & CSS
1

Hello all,

I’ve got 3 .gif images I want to use for repeating graphics for the side windows for my home page at http://www.productreviewsbytyler.com. I have attached them to the thread here.

So, to piece these together, am I going to need to make 3 divs inside my leftside and rightside windows, and give them an id and then put the images in as background images? Then, will I say no-repeat for the start and end gifs, but then set the sidewindowbody to horizontal-repeat?

Am I able to use CSS to flip the images horizontally and use them for the other side windows, or do I need to make 3 more images for the rightside window?

2

I’ve done a good attempt on my own here. Here’s what I’ve tried so far, and hopefully my server will update the display soon enough so you can see how it’s not quite there yet. It’s still not set right.


#leftside{
	overflow:auto;
	float:left;
	height:700px;
	width:300px;
}
	#leftsidestart{
		float:right;
		background:url("sidewindowstartleft.gif") no-repeat scroll 50% 0 transparent;
		height:300px;
		width:25px;
	}
	#leftsidebody{
		margin:0 auto;
		background:url("sidewindowbody.gif") repeat-x scroll 50% 0 transparent;
		height:300px;
	}
	#leftsideend{
		float:left;
		background:url("sidewindowendleft.gif") no-repeat scroll 50% 0 transparent;
		height:300px;
		width:18px;
	}



<div id="leftside">
    <div id="leftsidestart">&nbsp;</div>
    <div id="leftsidebody">
      <h2 class="sideWindowHeaderText">Most Popular</h2>
      <ul class="sideWindowLinks">
        <li><a href="http://www.atlantareviewgroup.com/food/peapod1.html">Peapod</a></li>
        <li><a href="http://www.atlantareviewgroup.com/health/dieting/southbeach1.html">South Beach Diet</a></li>
        <li><a href="http://www.atlantareviewgroup.com/coupons/brandcaster1.html">Brandcaster Coupons</a></li>
      </ul>
    </div><!-- end left box div -->
    <div id="leftsideend">&nbsp;</div>
  </div><!-- end leftside div -->