imagen superior a resolucion centrada

juanchooo12 · #1 (**permalink**) 26/02/2011, 23:26

HOla amigos, mi problema es el siguiente:
Tengo un div con un position:absolute y un z-index:-1 q lo uso como fondo
despues con jQuery ago q el fondo balla cambiando y todo el contenido tiene una opacidad,
mi problema es que la imagen del div q uso como fondo es mas grande que la resolucion. lo que yo quisiera saber es como ago q esta imagen este centrada sin inportar la resolucion.
espero aberme expresado bien
desde ya muchas gracias

ArturoGallegos · #2 (**permalink**) 27/02/2011, 00:57

en tu css

Código CSS:

Ver original#DivFondo{background:url(imagen.jpg) center center;}

juanchooo12 · #3 (**permalink**) 27/02/2011, 09:36

No me entendiste yo lo que quiero no es tener el fondo del div centrado.
Yo tengo una imagen q uso como fondo, le saque el scrollbar pero la imagen no queda centrada.
Quiero sabes como centrar una imagen.

juanchooo12 · #4 (**permalink**) 27/02/2011, 09:49

No me entendiste yo lo que quiero no es tener el fondo del div centrado.
Yo tengo una imagen q uso como fondo, le saque el scrollbar pero la imagen no queda centrada.
Quiero sabes como centrar una imagen.

sanxuan · #5 (**permalink**) 27/02/2011, 17:43

Coincido en pensar que usar background para la imagen de fondo es la mejor solución.
Otra posibilidad es la siguiente:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>titulo</title> 
<style type="text/css">
body {
margin:0; }
 
#contenido {
position: absolute;
}
#fondo img{
position:absolute;
left:50%;
top:50%;
width:600px; /*El ancho de la imagen */
height:600px; /*El alto de la imagen */
margin-top:-300px;  /* la mitad del alto es el margen superior*/ 
margin-left:-300px; /* y la mitad del ancho el margen derecho */
}
</style>
</head>
<body>
<div id="fondo"><img src="center.jpg" alt=""/></div>
<div id="contenido">
... Contenido ...
</div>
</body>
</html>

sanxuan · #6 (**permalink**) 27/02/2011, 18:19

Usando este otro CSS mejora bastante el ejemplo anterior, haciendo desaparecer las barras de desplazamiento cuando el fondo queda parcialmente oculto.

Código CSS:

Ver original<style type="text/css">
body {
    margin:0; 
}
body,html{
    height:100&#37;; /* aquí debería decir 100% */
}
#fondo{
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
}
#fondo img{
    position:absolute;
    left:50%;
    top:50%;
    width:600px; /*El ancho de la imagen */
    height:600px; /*El alto de la imagen */
    margin-top:-300px;  /* la mitad del alto es el margen superior*/
    margin-left:-300px; /* y la mitad del ancho el margen derecho */
}
#contenido {
    position: absolute;
}
</style>

juanchooo12 · #7 (**permalink**) 27/02/2011, 18:48

Muchas gracias lo voy a probar.
yo no use una imagen de fondo porq la idea es que cuando estas en la pagina el fondo valla cambiando. como no sabia como hacerlo con el fondo lo hice en un div con jQuery