Using CSS to make an image border

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


The geniuses up on high want me to surround a text area with a border
made of images. Normally I would use a combination of tables and CSS,
but I'd like to code it entirely in CSS. I just can't figure out how.

Here's how I would handle it with both tables and CSS. Five images, two
in <img> tags and three in style="background:url() repeat-x"
properties, surround text placed in a seventh cell. The setup would
look like this:

<img 1><background 2>
<background 3> text <background 3>
<img 4><background 5>

11 222222222
3          3
3   text   3
3          3
44 555555555

Does anyone know how to create an image border only using CSS? Thanks
for the help.

Re: Using CSS to make an image border

On Mon, 18 Sep 2006 20:16:14 -0700, ebakunin wrote:

Quoted text here. Click to load it

A smaller div centered vertically and horizontally, and z-indexed above a
larger div will leave an appearant 'border'.  If the bottom div is filled
with a small repeating image, that should do it.   It's going to have a
really kludgy feel to it, though.  You'll hate yourself in the morning.

Re: Using CSS to make an image border

mbstevens wrote:

Quoted text here. Click to load it

Assuming that the mentioned images are all really one and the same
image, I see no need to use z-index for this.
Just have an outer div and an inner div, set background image to outer
div, give inner div a background-color (white for instance), and give
the outer div a padding as wide as you want the image border.
No need for z-index or vertical centering.

Based on the example the OP gave though, I think that images 2, 3 and
4 are one and the same, while 1 and 4 are single images which differ
from the others. In that case, I would still use the above
construction, only with image 1 floated left inside the outer div,
before the start of the inner div, and image 4 floated left after the
inner div.

But perhaps all images really are different, in which case I would use
3 divs - one for the top row (1 floated left, 2 as background), one
for the middle row (3 as background) and one for the bottom row (4
floated left, 5 as background).


Els            /

Re: Using CSS to make an image border

On Tue, 19 Sep 2006 09:09:42 +0200, Els wrote:

Quoted text here. Click to load it

That is an easier way to do it, and a bit less kludgy.    I think
I'd still hate myself the morning after making a page using either method,
though. ;)

Site Timeline