Why not? That’s exactly how I would do it.
I would just lay the rotoract image on top of those two columns and include the space that’s needed around them all in one image. All elements are rectangular in css and whether you create the cut out on the columns or on the round image itself it makes no difference. Except that of you do it on the round image you only need one image. If you do it on the columns you need three images.
I would cut it as one solid non transparent image with background included. It is always the same distance from the top so the gradient on the body background will alwyas match as long as you place it correctly.
I really dont want to end up with multiple images and doing a table-like. Prefer to do it CSS way, as then I can set several stylesheets for different purposes (need to be able to degrade it for accessability for blind etc users)
Whether you use tables or css makes no difference to the number of images that you use as you still need images for each corner and hooks to hang them on. Of course tables shouldn’t be used for this but the number of images is irrelevant.
To make it easy I would simply top and tail the columns, assuming the columns are fixed widths, and paste the two top corners in one go and the same for the bottom. All images could be contained in one sprite to cut down loading time.
AS you might have guessed, I did the design in photoshop, and now EVERYONE in the club likes the design and I cant port it to code without breaking it haha
I think it’s quite straight forward if you plan it carefully and there are plenty of round corner tutorials about as I linked to above.
You may just have to bite the bullet and puts something temporary up that we can help you with. (I have to rush off now but I’m sure someone else can chip in and help.)