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; }
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