What have I done wrong? Can't create a frame from 3 pics using CSS.

[irock]

Hi, I tried to create a 3 sided frame with repeating JPG using this the following codes.

.primaryborder {
background: url("index_files/leftBG.jpg"); left; background-repeat: repeat-y;
background: url("index_files/rightBG.jpg"); right; background-repeat: repeat-y;
background: url("findex_files/tableBaseBG.jpg"); bottom; background-repeat: repeat-x; }

However, one the last line seem to work. The leftBG.jpg and rightPG.jpg are missing from the left and right side of the <div>.

Could anyone pls help?

[Reflection]

You can only set the background property of an element once, ie there is only one background for an element. The last one works because it is the last background defined.

[irock]

Thanks, Reflection.

So, is there any other way to create what I wanted?

I simply would like a table box with a 3-sided frame whose sides have different background pic.

[Reflection]

Hmmm there are a few ways to try doing this, how are your css positioning skills? :)

One method is to create a container and then position 3 elements inside it.

The other would be to create 3 elements of the same size and position them in the same coordinates on top of each other, with each having a different background pic and location.

Either way might not be worth the trouble depending on how much you want to do this.

[irock]

Regarding the first method, I have tried some codes posted by another member.

.column {position:absolute; top:5px; border:1px solid #a00;}
#a {left:0; width:160px; background: url("index_files/leftBG.jpg"); }
#b {left:161px; width:10px;}
#c {left:172px; width:500px;}
#d {left:673px; width:10px;}
#e {left:684px; width:160px; }

<div class="column" id="a" >content</div>
<div class="column" id="b">x</div>
<div class="column" id="c">content</div>
<div class="column" id="d">x</div>
<div class="column" id="e">content</div>

This seems to work. My lefBG.jpg is now there. However, I couldn't align this element to the center of my browser window dynamically. Any pointers?