Box Border Image

[Guest bobocop]

Can anyone help me with replacing the boxes border from solid to an image.

This is what i have now.

boxContentLeft, .boxContentRight {

	border-left: 2px solid #0E51A3;

	border-right: 2px solid #0E51A3;

	border-bottom: 2px solid #0E51A3;

	background-color: #FFFFFF;

	padding-left: 5px;

	margin-bottom: 10px;

	padding-top: 3px;

	padding-bottom: 5px;

I wanted to change the left & right borders to about 10px with a background image that repeats y.



I tried to change

 border-left: 2px solid #0E51A3;

 

to 

 border-left: 10px image: url(../styleImages/backgrounds/boxTitleBg.gif);

just as a test, but that just removes the border.

I'm editing the layout.css.

I have tried a couple of different ways but I just can't seem to get it right.

Thanks.

[burgensteen]

I dont this can be done.

You need to float your div in another new div that is the correct amount larger and give it the background image.

Hope you understand what I mean !!!

[Guest]

This can be done with css3 but not all browsers are compliant with css3, Safari3 is the only one I am aware of. IE isn't compliant with css period so, knowing Microsoft, they probably won't have this feature available for several years. Anyway, here's a link on css3 and the border-image property.

Jen

[Guest bobocop]

Thanks for your replies.

I thought it would be simple (for coders anyway)

because the top of the boxes (Title) has a background image.

Thanks .