Is it possible to have a CSS image as border on the bottom AND top?

Str8

I want to use an image as a border (which is pretty much a dot repeated) and I want to put this on the bottom and top border on my menu.

Right now it either shows on the top OR the bottom, but I cannot figure out how to get both.

I have tried:

Code:

#menu a {
	display: block;
	float: left;
	height: 25px;
	padding: 9px 30px 0 40px;
        background: url(images/img5.gif) repeat-x top, bottom;
        text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	color: #656973;
        
}

Code:

#menu a {
	display: block;
	float: left;
	height: 25px;
	padding: 9px 30px 0 40px;
        background: url(images/img5.gif) repeat-x bottom;
        background: url(images/img5.gif) repeat-x top;
        text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	color: #656973;
        
}

Is this even possible, I think im about to punch my computer screen :\

d3iti · 11-01-2011, 08:50 AM

Hi,

I think it is possible.

Web w3schools.
Section Background Image - Set position and no-repeat

Code:

#menu a{
        background-image:url('images(img5.gif');
        background-position: bottom top;
	display: block;
	float: left;
	height: 25px;
	padding: 9px 30px 0 40px;
        text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	color: #656973;
}

CSS_Man · 11-01-2011, 07:35 PM

Google border-image. Its part of css3 but it works in firefox chrome ie9 and probably safari as well.

lobrc · 11-01-2011, 08:12 PM

@OP, You do know you can create dashed borders with just CSS?

robh · 11-01-2011, 09:17 PM

An example taken from one of my site css. If this helps.

This example shows the top border only 1px dashed. Adjust to your own need.

Code:

.menu_two { /* used only in tpl_main.php */
    border-width: 1px 0 0 0; /* see note below */
    border-style: dashed;
    background-color:  #000000;
}

/*===================================================
here, the 'border-width:' controls all four sides of the table independently,
using '1px 0 0 0. Simply adjust the zero values to reflect which side/s YOU
need.

Cuts down on typing, also :D
===================================================*/

Rob

bubt · 11-08-2011, 06:24 PM

Try this:

Code:

.menu {
     border: 1px dotted #000;
}