Fondos y resoluciones

Kanyenke · #1 (**permalink**) 12/02/2011, 15:28

Buenas gente!

Tengo una web con una imagen de fondo muy muy grande, hecha para que los monitors de otras resoluciones no vean tanto espacio en blanco.

El tema es que no se como hacer para que quede centrado, me refiero, a que cuando se cargue la pagina el fondo quede en el medio, al mismo tiempo que si se carga con una resolucion mayor haya algo a la izquierda, o sea.

un div de 1680 de width, donde esta el fondo; si lo veo en una resolcuion de 1024, no queda bien.

quiero que el div quede al medio, y que ademas siga habiendo imagen a la izquierda.

No se si se etneinde, je.

Gracias de antemano!

Kanyenke · #2 (**permalink**) 12/02/2011, 16:03

ME di cuenta que lo ideal sería que cuando cargue la pagina, se ubique en el centro del div grande, se puede hacer eso?

Depsues es cuestion de sacar los scrolls y listo.

mdk · #3 (**permalink**) 13/02/2011, 06:14

Hola, podrías usar mas o menos esto:

Los CSS

Código:

.fondo {	
	position: absolute;
	width: 1600px; /* Aquí introduces el ancho de la imagen */
	height: 1200px; /* Aquí introduces el alto de la imagen */
	top: 50%;
	left: 50%; 
	margin-left: -800px; /* Aquí introduces la mitad del ancho de la imagen */	
	margin-top: -600px; /* Aquí introduces la mitad del alto de la imagen */	
	background-image: url('imagen.jpg'); /* Aquí introduces la ruta del fondo */
}
/* A continuacion, deberias de crear el css de la capa contenedor que es donde empezarias a trabajar */
.contenedor {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px; 
	margin-left: 0px; /* Aquí pones el marjen izquierdo con el que empezarias a trabajar */	
	margin-top: 0px; /* Aquí pones el marjen superior con el que empezarias a trabajar */	
	overflow-x:hidden;
	overflow-y:scroll;
}

El HTML deberias de ponerlo mas o menos asi:

Código HTML:

<body style="margin: 0;">

<div class="fondo"></div>
<div class="contenedor"></div>

Saludos.

Kanyenke · #4 (**permalink**) 13/02/2011, 15:25

Muchas gracias! Me sirvio mucho ese codigo...

Ahora, lo que si pasa, es que, auqnue hacia la izquierda no hay nada; hay scroll hacia la derecha con zona sin usar.

Hya forma de "limitar" el scroll hasta ciertos pixeles?

mdk · #5 (**permalink**) 13/02/2011, 20:58

Sustituye el overflow-y:scroll; que te puse por overflow-y: auto;

Saludos.

Kanyenke · #6 (**permalink**) 14/02/2011, 11:41

Tuve que agregarle un overflow:hidden al body porque sino tenia dos barras...

Pero fuera de eso fantastico! Gracias MDK, me salvaste la vida con tu eficiencia.

mdk · #7 (**permalink**) 14/02/2011, 12:42

Cierto, no quité el scroll de la página poniendo overflow: hidden en el body, porque di por hecho que ya lo pusiste tú.

Saludos.