Foros del Web » Creando para Internet » CSS »

Fondos y resoluciones

Estas en el tema de Fondos y resoluciones en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/02/2011, 15:28
Avatar de Kanyenke  
Fecha de Ingreso: octubre-2008
Mensajes: 9
Antigüedad: 9 años, 2 meses
Puntos: 0
Fondos y resoluciones

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!
  #2 (permalink)  
Antiguo 12/02/2011, 16:03
Avatar de Kanyenke  
Fecha de Ingreso: octubre-2008
Mensajes: 9
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Fondos y resoluciones

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.
  #3 (permalink)  
Antiguo 13/02/2011, 06:14
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Fondos y resoluciones

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.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)

Última edición por mdk; 13/02/2011 a las 09:33
  #4 (permalink)  
Antiguo 13/02/2011, 15:25
Avatar de Kanyenke  
Fecha de Ingreso: octubre-2008
Mensajes: 9
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Fondos y resoluciones

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?
  #5 (permalink)  
Antiguo 13/02/2011, 20:58
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Fondos y resoluciones

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

Saludos.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #6 (permalink)  
Antiguo 14/02/2011, 11:41
Avatar de Kanyenke  
Fecha de Ingreso: octubre-2008
Mensajes: 9
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Fondos y resoluciones

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.
  #7 (permalink)  
Antiguo 14/02/2011, 12:42
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: Fondos y resoluciones

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.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)

Etiquetas: fondo
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 04:14.