Ajustar fondo al tamaño de la capa

jose91 · #1 (**permalink**) 13/11/2009, 18:54

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!

sebaweb · #2 (**permalink**) 13/11/2009, 19:08

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

jose91 · #3 (**permalink**) 13/11/2009, 19:14

Cita:

Iniciado por sebaweb

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

deirdre · #4 (**permalink**) 13/11/2009, 19:40

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

jose91 · #5 (**permalink**) 14/11/2009, 03:19

Cita:

Iniciado por deirdre

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.

jose91 · #6 (**permalink**) 14/11/2009, 17:25

Por favor, alguien podría resolverme mi duda...ando algo estancado...

deirdre · #7 (**permalink**) 14/11/2009, 18:46

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

jose91 · #8 (**permalink**) 15/11/2009, 02:55

Gracias por la ayuda, ya esta ese tema solucionado ;)

jomaruro · #9 (**permalink**) 15/11/2009, 05:10

Hola:

Cita:

Iniciado por jose91

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.

jose91 · #10 (**permalink**) 15/11/2009, 07:30

Cita:

Iniciado por jomaruro

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

lynxstyle · #11 (**permalink**) 15/11/2009, 07:55

¿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.