Foros del web, para los que viven de bits

Hola, tengo un pequeño form y la etiqueta de legend la tengo asi:

legend{
background-color: #123456;
color:black;
font-weight:bold;
font-size: 12px;
font-family: Verdana;
margin:5px 0 0 5px;
}

<legend>PEPITO</legend>
Me saldria algo asi: -- PEPITO --

Pero quiero ponerle unas curvas a los laterales, haciendolo asi:
<legend><img src='lat1.gif'>PEPITOr'<img src='lat2'></legend>

Algo asi: --[ PEPITO ]--

Pero al poner la propiedas background-color me pone todo el fondo y se carga las imagenes, si quito la propiedad se ve bien los laterales pero no tiene fondo el texto 'PEPITO'

Solición propuesta 1:

<legend><img src='lat1.gif'><span class="fondo">PEPITO</span><img src='lat2'></legend>

Y le pones el fondo a la clase "fondo". No se si haya una solución más sencilla...

Pues no me hace nada, en head le añadi esto

#fondor {
font-size:18px;
background-color: #515151;

}

y en el cuerpo:

<legend><img src='lat1.gif'><span class="fondo">PEPITO</span><img src='lat2'></legend> Las imagenes me las muestra bien, lo que no me hace nada es con el fondo, he puesto esos 18px para saber si se modificaba pero tampoco se inmuta

Hola multimedia007

El código Css que has puesto es para asignarlo a un id, pero luego usas una clase. Ponlo así:

.fondo {
font-size:18px;
background-color: #515151;
}

Saludos,

Gracias por la contestación, ya me funciona!!

El problema esque ahora por asi decirlo el final de la imagen esta mucho mas para abajo que el contorno del legend, es decir:

Imagen Legend

|- |-------------------|
| | |
| |____________|
|_

Reduciendo le height de la imagen se acerca un poco más pero aun asi no queda del todo bien, y la imagen est completa por abajo, salvo un pequeño espacio transparente a la izquierda. Tengo que añadirle alguna propiedas más o debo modificar la imagen.

Adjunto: