Foros del Web » Creando para Internet » CSS »

Problemas con imagen líquida, reescalado de fondo

Estas en el tema de Problemas con imagen líquida, reescalado de fondo en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 25/09/2008, 02:49
 
Fecha de Ingreso: marzo-2008
Mensajes: 79
Antigüedad: 9 años, 9 meses
Puntos: 0
Problemas con imagen líquida, reescalado de fondo

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
__________________
Jesus dijo: el que cree en mi tiene vida eterna[/B]
  #2 (permalink)  
Antiguo 25/09/2008, 04:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con imagen líquida, reescalado de fondo

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:

Cita:
<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:

Cita:
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%;
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 26/09/2008, 03:03
 
Fecha de Ingreso: marzo-2008
Mensajes: 79
Antigüedad: 9 años, 9 meses
Puntos: 0
De acuerdo Respuesta: Problemas con imagen líquida, reescalado de fondo

Gracias Mikmoro, funcionó sin problemas asignando un color de fondo
__________________
Jesus dijo: el que cree en mi tiene vida eterna[/B]
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:48.