Foros del Web » Creando para Internet » Diseño web »

Ajustar fondo al tamaño de la capa

Estas en el tema de Ajustar fondo al tamaño de la capa en el foro de Diseño web en Foros del Web. De que forma podría ajustar un fondo, mas grande o mas pequeño, al tamaño de una capa? Lo necesito para que todo el mundo vea ...
  #1 (permalink)  
Antiguo 13/11/2009, 18:54
Avatar de jose91  
Fecha de Ingreso: septiembre-2009
Ubicación: Cordoba
Mensajes: 48
Antigüedad: 8 años, 2 meses
Puntos: 1
Ajustar fondo al tamaño de la capa

De que forma podría ajustar un fondo, mas grande o mas pequeño, al tamaño de una capa? Lo necesito para que todo el mundo vea igual el fondo de mi cabecera, menús laterales...etc, y no se les quede capa sin rellenar.

Gracias de antemano!
  #2 (permalink)  
Antiguo 13/11/2009, 19:08
Avatar de sebaweb  
Fecha de Ingreso: abril-2009
Mensajes: 95
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Ajustar fondo al tamaño de la capa

no entendi muy bien, podrias expresar mejor lo que queres hacer?? no por vos ee, sino por mi que mucho no entiendo pero quizas te pueda ayudar
  #3 (permalink)  
Antiguo 13/11/2009, 19:14
Avatar de jose91  
Fecha de Ingreso: septiembre-2009
Ubicación: Cordoba
Mensajes: 48
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Ajustar fondo al tamaño de la capa

Cita:
Iniciado por sebaweb Ver Mensaje
no entendi muy bien, podrias expresar mejor lo que queres hacer?? no por vos ee, sino por mi que mucho no entiendo pero quizas te pueda ayudar
La verdad es que yo no tengo muchas luces explicando xD. A ver, me refiero a que aunque el fondo mida 40x40px, ocupe el total de una capa de 80x80px, sin repetirse, es decir que se agrande o se achique según le venga a la resolución del navegante.

PD: Como la web las capas las tengo mediante tantos%, no quiero que a nadie se le quede un trozo de capa sin fondo, que se ve muy feo :P
  #4 (permalink)  
Antiguo 13/11/2009, 19:40
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ajustar fondo al tamaño de la capa

Hola jose91

Si no quieres que se repita y que ocupe todo el espacio de su contenedor debes ponerla en valores de 100% de alto y de ancho. Pero debes considerar que esa imagen se va distorsionar al ampliarse, según los casos.

Bye
  #5 (permalink)  
Antiguo 14/11/2009, 03:19
Avatar de jose91  
Fecha de Ingreso: septiembre-2009
Ubicación: Cordoba
Mensajes: 48
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Ajustar fondo al tamaño de la capa

Cita:
Iniciado por deirdre Ver Mensaje
Hola jose91

Si no quieres que se repita y que ocupe todo el espacio de su contenedor debes ponerla en valores de 100% de alto y de ancho. Pero debes considerar que esa imagen se va distorsionar al ampliarse, según los casos.

Bye
Y como indico eso en la hoja de estilos ? a ver si sabes decirme donde debo incluir las etiquetas.

Código HTML:
#Cabecera {
  background-image:url(fondoc.jpg);
  background-repeat:no-repeat;
  background-position:absolute;
  color:red;
  background-color:blue;
  Width:96%;
  Height:150px;
  Margin:-0.8% 2%;
Utilizaré una imagen de un tamaño que no se distorsione mucho tanto en las resoluciones bajas como en las altas.
  #6 (permalink)  
Antiguo 14/11/2009, 17:25
Avatar de jose91  
Fecha de Ingreso: septiembre-2009
Ubicación: Cordoba
Mensajes: 48
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Ajustar fondo al tamaño de la capa

Por favor, alguien podría resolverme mi duda...ando algo estancado...
  #7 (permalink)  
Antiguo 14/11/2009, 18:46
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ajustar fondo al tamaño de la capa

Hola jose91

Haz un 'copy-paste' en un html limpio y estudia este acercamiento a lo que planteas. Tendrás que adaptarlo a tu diseño (que desconozco).

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="es" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cabecera con imagen elástica</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
#cabecera {
	width: 96%;
	height: 150px;
	margin: 0 2%;
	color:red;
	background-color: blue;
}
#portacabecera {
	width: 100%;
	height: 100%;
	position: relative;
}
.imagen {
	width:100%;
	height: 100%;
	position: absolute;
}
.otras_cosas {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: 1;
}
</style>
</head>

<body>
<div id="cabecera">
	<div id="portacabecera">
		<img alt="" src="fondoc.jpg" class="imagen" />
		<span class="otras_cosas">Aquí mis otras cosas</span>
	</div>
</div>
</body>

</html> 
Nota: No utilices mayúsculas en tu hoja css.

Bye
  #8 (permalink)  
Antiguo 15/11/2009, 02:55
Avatar de jose91  
Fecha de Ingreso: septiembre-2009
Ubicación: Cordoba
Mensajes: 48
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Ajustar fondo al tamaño de la capa

Gracias por la ayuda, ya esta ese tema solucionado ;)
  #9 (permalink)  
Antiguo 15/11/2009, 05:10
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ajustar fondo al tamaño de la capa

Hola:

Cita:
Iniciado por jose91 Ver Mensaje
Gracias por la ayuda, ya esta ese tema solucionado ;)
Me alegro que lo hayas solucionado pero, ¿no crees que deberías decir cómo lo has solucionado para, en un futuro, ayudar a alquien que se encuentre en tu situación?. Porque no se sabe si ha sido la ayuda de dreirde o otra solución que tú hayas encontrado.

Saludos.

  #10 (permalink)  
Antiguo 15/11/2009, 07:30
Avatar de jose91  
Fecha de Ingreso: septiembre-2009
Ubicación: Cordoba
Mensajes: 48
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Ajustar fondo al tamaño de la capa

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



Me alegro que lo hayas solucionado pero, ¿no crees que deberías decir cómo lo has solucionado para, en un futuro, ayudar a alquien que se encuentre en tu situación?. Porque no se sabe si ha sido la ayuda de dreirde o otra solución que tú hayas encontrado.

Saludos.

Pues sí, disculpas. La solución me la ha dado dreide en su respuesta, mas concretamente esta parte:

Código HTML:
#cabecera {
	width: 96%;
	height: 150px;
	margin: 0 2%;
	color:red;
	background-color: blue;
}
#portacabecera {
	width: 100%;
	height: 100%;
	position: relative;
}
.imagen {
	width:100%;
	height: 100%;
	position: absolute;
y esta :

Código HTML:
<div id="cabecera">
	<div id="portacabecera">
		<img alt="" src="fondoc.jpg" class="imagen" />
		<span class="otras_cosas">Aquí mis otras cosas</span>
	</div>
</div> 
La primera es para la hoja de estilos, y la segunda forma la cabecera en el index.html
  #11 (permalink)  
Antiguo 15/11/2009, 07:55
 
Fecha de Ingreso: julio-2005
Mensajes: 304
Antigüedad: 12 años, 5 meses
Puntos: 4
Respuesta: Ajustar fondo al tamaño de la capa

¿Por que no pones la imágen cortada de manera que la parte elastica sea un trozo uniforme?

Me explico mejor si la cabecera por ejemplo contiene (Logo y texto) que la cubre entera pues la divides en (Logo+imágen que sólo contenga el color de fondo+imágen con el texto), así le das la elasticidad a la zona central, la cual no contiene ningún elemento que al distorsionarse pieda calidad. O bien dejarlo vacio con una imágen de fondo que al estirarse se duplicará y parecerá que siempre está relleno.

No se si me entiendes pero creo que es lo más correcto.
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 22:51.