View Full Version : CSS Custom Image Borders

09-18-2006, 09:28 AM
Hey all,

I am working on a site, and for some reason, they want it so that the borders are a kind of stamp pattern rather than a normal border. Is there a decently semantic way to do this without JS the causes it to work both functionally and semantically?

I've got kind of a start at http://www.premierpostage.com/index1.php

You'll notice, in FF at least, that the top and bottom are kosher, the sides obviously push the content down and aren't exactly expandable. Any help would be much appreciated!

09-18-2006, 11:04 AM
I suppose this is going to be a fixed width? Then you can make the side borders one image with as much space in between as the content is wide. You would then use the elements you have to apply the images as background, e.g.:

<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

In this scenario you can apply the side borders to the container div, the top border as background to the header div, and the bottom border to the footer div.

09-18-2006, 09:57 PM
I tried something akin to that.

If you view the source code, there is essentially a container div that has two divs in it for the left pattern and the right pattern that are supposed, as seen in the CSS, extend 100% of the height of the container, repeating on the y axis. Why it's not working, I'm not entirely sure.

The CSS is more or less as follows:

#stampleft {width: 6px; height:50em; background: url(../images/leftsidestamp.gif); background-repeat:repeat-y; float:left; margin-left:-4px}
#stampright {width: 6px; height:50em; background: url(../images/rightsidestamp.gif); background-repeat:repeat-y; float:right; margin-right:-4px}
#container {width:791px; margin:0 auto; border:1px solid #fff }

09-18-2006, 10:53 PM
But that's not even necessary! I mean those two divs just for the images. Always try to use as much HTML as necessary but as few as possible.

You can just combine those two images and put them in the container itself. They would automatically repeat as much as the container's height is increasing.

Look at this CSS Zen Garden submission (http://csszengarden.com/?cssfile=/191/191.css&page=0), especially at the background image (http://csszengarden.com/191/cover.png). That's basically the same approach. Two borders as one image with as much space in between as the content will be wide.

09-18-2006, 11:44 PM
I think I understand, would I then just apply the border to the container div as a plain border or as border-left/right? I guess i can just test around a bit. Thanks!

09-19-2006, 12:35 AM
No, as the guy with the CSS Zen Garden Design you would apply this image as background image. Remember, that's just an image displaying two borders... so it's like "fake borders". You aren't applying borders to the div but a background image which pretends the container has borders.

09-19-2006, 07:14 AM
Thanks man, I think I got it!

09-19-2006, 01:52 PM
Great! That's it! :)
Now, to extend this method apply the top border as background image to the header div and the bottom border in the same way to the footer div (positioned at the bottom, of course) and remove the actual <img> tags. Saving code, you know? ;)