Webmaster forum - Using CSS to make an image border

Author

Using CSS to make an image border

ebakunin@gmail.com

2006-09-24, 6:58 pm

Hello,

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.

mbstevens

2006-09-24, 6:58 pm

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

> Hello,
>
> 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.
> ....
> Does anyone know how to create an image border only using CSS? Thanks for
> the help.

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.

Els

2006-09-24, 6:58 pm

mbstevens wrote:

> On Mon, 18 Sep 2006 20:16:14 -0700, ebakunin wrote:
>
>
> 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.

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).

HTH

--
Els http://locusmeus.com/

mbstevens

2006-09-24, 6:59 pm

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

>
>
> 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.

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. ;)