Problemas con imagen líquida, reescalado de fondo

[migquintana]

Hola amigos,

Hace poco terminé de ajustar una imagen líquida de fondo, con css y se me ha dañado el disco duro sin respaldo

Bueno, el tema es que me propuse hacerlo nuevamente, pero no doy.

Se trata de una imagen de fondo que he fraccionado en ocho archivos .gif, no logro hacer que se vea como debe ser. el borde inferior y superior se alargan más de la cuenta.

Aquí la puedes observar;

http://www.globalcasa.eu/m/pe2/bordes_esquinas.html

CSS:

Código:

div.top {
	height:150px; 
	
	
	  background: transparent url(top_line.gif) scroll repeat top center;

  
  display: block;
  border: none;
  padding: 80;
  line-height: 0.1;
  font-size: 1px;
}
	
img.esquina_sup_izq { float:left; }
img.esquina_sup_der { float:right; }

div.content { 
	background-image:url(left_line.gif); 
	background-repeat:repeat-y; 
	background-color: #a9d974; }
	
div.boxcontrol { padding:0 5% 0 5%; 
	background-image:url(right_line.gif); 
	background-position:right; 
	background-repeat:repeat-y; }
	
div.bottom { height:150px; 
	background-image:url(btm_line.gif); 
	background-repeat:repeat-x; 
	border:0;
	padding:0;
	margin:0;}
	
img.esquina_inf_izq { float:left; }
img.esquina_inf_der { float:right; }

h1 { margin:0; border-bottom:1px dashed #996;}

p.autor { padding-right:8px; 
	border-right:1px dashed #996;
	text-align:right;
	margin:-.1em 0 0 0; }
	
/* IE 5.5 box model hack para posicionar correctamente las imagenes de esquina */
* html img.esquina_sup_izq, * html img.esquina_inf_izq  { \margin-left:-.2em;  ma\rgin-left:0; }
* html img.esquina_inf_der, * html img.esquina_sup_der { \margin-left:.2em; }

Así debería quedar:

http://www.globalcasa.eu/m/pe2/tmp/bordes_esquinas.html

CSS:

Código:

div.top {
	height:28px; 
	background-image:url(top_line.gif); 
	background-repeat: no-repeat fixed 0.5em 9em; 
	margin:2em 0 0 0;}
	
img.esquina_sup_izq { float:left; }
img.esquina_sup_der { float:right; }

div.content { 
	background-image:url(left_line.gif); 
	background-repeat:repeat-y; 
	background-color: #a9d974; }
	
div.boxcontrol { padding:0 5% 0 5%; 
	background-image:url(right_line.gif); 
	background-position:right; 
	background-repeat:repeat-y; }
	
div.bottom { height:28px; 
	background-image:url(btm_line.gif); 
	background-repeat:repeat-x; 
	border:0;
	padding:0;
	margin:0;}
	
img.esquina_inf_izq { float:left; }
img.esquina_inf_der { float:right; }

h1 { margin:0; border-bottom:1px dashed #996;}

p.autor { padding-right:8px; 
	border-right:1px dashed #996;
	text-align:right;
	margin:-.1em 0 0 0; }
	
/* IE 5.5 box model hack para posicionar correctamente las imagenes de esquina */
* html img.esquina_sup_izq, * html img.esquina_inf_izq  { \margin-left:-.2em;  ma\rgin-left:0; }
* html img.esquina_inf_der, * html img.esquina_sup_der { \margin-left:.2em; }

También lo he intentando fraccionando en 4 imágenes, pero tampoco lo he logrado:

http://www.globalcasa.eu/m/pe/



Gracias de antemano por tu tiempo

[Mikmoro]

Pues tienes dos opciones:
1.- has hecho tus esquinas con fondo transparente, y por eso se ve el fondo de la caja que las contiene. Ponles fondo blanco en lugar de transparente y taparán el fondo.
2- puedes poner las imágenes fuera de la caja:

<img src="top_left.gif" alt="Esquina superior izquierda" class="esquina_sup_izq">
<img src="top_right.gif" alt="Esquina superior derecha" class="esquina_sup_der">
<div id="top" class="top">

y ahora en el selector de la css de esa caja, añadir esto:

div.top {background:transparent url(top_line.gif) repeat scroll center top;
border:medium none;
display:block;
font-size:1px;
height:150px;
line-height:0.1;
margin:0 auto;
width:70%;

[migquintana]

Gracias Mikmoro, funcionó sin problemas asignando un color de fondo