Foros del Web » Creando para Internet » CSS »

imagen superior a resolucion centrada

Estas en el tema de imagen superior a resolucion centrada en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/02/2011, 23:26
 
Fecha de Ingreso: enero-2011
Mensajes: 15
Antigüedad: 6 años, 10 meses
Puntos: 0
imagen superior a resolucion centrada

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
  #2 (permalink)  
Antiguo 27/02/2011, 00:57
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: imagen superior a resolucion centrada

en tu css

Código CSS:
Ver original
  1. #DivFondo{background:url(imagen.jpg) center center;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 27/02/2011, 09:36
 
Fecha de Ingreso: enero-2011
Mensajes: 15
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: imagen superior a resolucion centrada

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.
  #4 (permalink)  
Antiguo 27/02/2011, 09:49
 
Fecha de Ingreso: enero-2011
Mensajes: 15
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: imagen superior a resolucion centrada

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.
  #5 (permalink)  
Antiguo 27/02/2011, 17:43
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: imagen superior a resolucion centrada

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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.            "http://www.w3.org/TR/html4/loose.dtd">
  3. <title>titulo</title>
  4. <style type="text/css">
  5. body {
  6. margin:0; }
  7.  
  8. #contenido {
  9. position: absolute;
  10. }
  11. #fondo img{
  12. position:absolute;
  13. left:50%;
  14. top:50%;
  15. width:600px; /*El ancho de la imagen */
  16. height:600px; /*El alto de la imagen */
  17. margin-top:-300px;  /* la mitad del alto es el margen superior*/
  18. margin-left:-300px; /* y la mitad del ancho el margen derecho */
  19. }
  20. </head>
  21. <div id="fondo"><img src="center.jpg" alt=""/></div>
  22. <div id="contenido">
  23. ... Contenido ...
  24. </div>
  25. </body>
  26. </html>
  #6 (permalink)  
Antiguo 27/02/2011, 18:19
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: imagen superior a resolucion centrada

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
  1. <style type="text/css">
  2. body {
  3.     margin:0;
  4. }
  5. body,html{
  6.     height:100&#37;; /* aquí debería decir 100% */
  7. }
  8. #fondo{
  9.     width:100%;
  10.     height:100%;
  11.     overflow:hidden;
  12.     position:absolute;
  13. }
  14. #fondo img{
  15.     position:absolute;
  16.     left:50%;
  17.     top:50%;
  18.     width:600px; /*El ancho de la imagen */
  19.     height:600px; /*El alto de la imagen */
  20.     margin-top:-300px;  /* la mitad del alto es el margen superior*/
  21.     margin-left:-300px; /* y la mitad del ancho el margen derecho */
  22. }
  23. #contenido {
  24.     position: absolute;
  25. }
  26. </style>
  #7 (permalink)  
Antiguo 27/02/2011, 18:48
 
Fecha de Ingreso: enero-2011
Mensajes: 15
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: imagen superior a resolucion centrada

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

Etiquetas: centrada, resolución, superior
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 19:22.