CSS3 can do exactly what you want. In particular, this section explains how a single image can be sliced up in a variety of ways to produce borders.

To begin with, you need to combine all of the images into one. For example, my layout uses this to produce the entire border in compatible browsers. The center section should be your background color.

____________________

I'm using my layout as a reference, since it's very similar to what you want (but lacks the image on the right).

The CSS that sets up the background and border looks like this:

---

.yume0a

{

background:#070717 url(http://img714.imageshack.us/img714/2234/blockmaze.png) fixed center

}

.yume0b

{

border:8px double #67263e;

border-image:url(http://img521.imageshack.us/img521/3002/borderw.png) 8 repeat;

-moz-border-image:url(http://img521.imageshack.us/img521/3002/borderw.png) 8 repeat;

-webkit-border-image:url(http://img521.imageshack.us/img521/3002/borderw.png) 8 repeat

}

---

In order for your border to show up correctly, you must also provide code for the border that will appear in browsers that don't support using border images. Since my border image is for a border of 8 pixels on all sides, I use a border of 8 pixels.

In order to have transparency in my border image, I have set the background color inside a container DIV. One positive side effect is that it lets me change the background color whenever I want, although doing so wouldn't fit well with my border.

---

<div class="yume0a"><div class="yume0b"><div style="background:#000">

---

You could easily set the background color using that, and the CSS to set your font properties can go just about anywhere.

If you're going to copy this code, please change the CSS classes. I've had problems with that before.

____________________

First, you've used the same class for both DIVs. That won't work.

Second, you've copied all of the colors and URLs from mine. That will give you my layout!

(Third, you can't have linebreaks in your CSS. That's a bug in the board, Xk will fix it eventually.)

Looking again, I see you've added a bunch of semicolons. You don't need more unless you're going to add more CSS. I don't know if the extra semicolons will mess anything up, but it's better to remove them.

____________________

You still have linebreaks. You have to paste the code into notepad or such and get it all on one (really long) line in order for it to work.

When I remove the line breaks (using Opera's page source editor), it works better. I'm concentrating on making the border work first, so that's all that needs to appear for now.

Edit: Might be good to stick something in the sig. Like:

---

</div></div></div>

---

____________________

Your layout will break spectacularly on large posts. It looks a lot better than anything I could come up with, though.

There are a few things that need changing. First off, change the border image to this.

Next, change your header to this:

---

<style type="text/css">

.lunaria6

{

background:#000 url(http://i200.photobucket.com/albums/aa79/Green-Kirby/Jul/GradationBG.png) repeat-x top;

color:#f0b030

}

.lunaria7

{

background:url(http://i200.photobucket.com/albums/aa79/Green-Kirby/Jul/moonlighticon2.png) no-repeat right;

padding:30px 285px 30px 15px

}

.lunaria9

{

border:15px double #f0b030;

border-image:url(http://i200.photobucket.com/albums/aa79/Green-Kirby/Jul/moonlightlayout2.png) 15 round;

-moz-border-image:url(http://i200.photobucket.com/albums/aa79/Green-Kirby/Jul/moonlightlayout2.png) 15 round;

-webkit-border-image:url(http://i200.photobucket.com/albums/aa79/Green-Kirby/Jul/moonlightlayout2.png) 15 round;

min-height:270px;

min-width:704px

}

</style>

<div class="lunaria6">

<div class="lunaria7">

<div class="lunaria9">

<div style="background:#000">

---

You might want to change the classes again, since it's new code. (I've removed the max-width for the lucky few on really really wide monitors.)

And your sig should be:

---

</div></div></div></div>

---

Now that I see what you want, making it work is easy. If I hadn't been in Seattle all day, I would have done this sooner.

____________________

Originally posted by Lunaria

---

I'm aware that my old set up limited me to a quite small post box, but I did not have any issues with that, as if I made a bigger post I could always just disable the layout or quickly do the math to reformat it to be longer. :<

---

That doesn't work with auto-updating layouts, and when your post overflows, it covers everything below it. :/

Short of changing it to a scrolling layout, I can't think of any way to make it work.

____________________