Foros del Web » Creando para Internet » CSS »

Imagen de fondo autoajustable

Estas en el tema de Imagen de fondo autoajustable en el foro de CSS en Foros del Web. Pues quero hacer que, en el fond salga una imagen que se vea toda la pantalla que no se repita y se ajuste a todos ...
  #1 (permalink)  
Antiguo 13/06/2009, 12:35
 
Fecha de Ingreso: mayo-2008
Mensajes: 315
Antigüedad: 9 años, 2 meses
Puntos: 7
Imagen de fondo autoajustable

Pues quero hacer que, en el fond salga una imagen que se vea toda la pantalla que no se repita y se ajuste a todos los fondos,es decir que ocupe toda la pantalla para los de 800x 600, y los 1600x1024 igual. Entienden?, ademas que al bajar, para abajo, se siga mostrando, es decir que la imagen se mueva amendida que baje. Es decir que siempre la veas.
  #2 (permalink)  
Antiguo 13/06/2009, 13:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años
Puntos: 361
Respuesta: Imagen de fondo autoajustable

Hola:

Date una vuelta por esta página a ver si te sirve.

Saludos.

  #3 (permalink)  
Antiguo 13/06/2009, 14:29
 
Fecha de Ingreso: mayo-2008
Mensajes: 315
Antigüedad: 9 años, 2 meses
Puntos: 7
Respuesta: Imagen de fondo autoajustable

Si tio, pero no encuentro el codigo a introducir no?
  #4 (permalink)  
Antiguo 13/06/2009, 15:14
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 8 años, 9 meses
Puntos: 40
Respuesta: Imagen de fondo autoajustable

tenías que ver el código fuente ahí esta todo lo que usa, que poca atención, , pero bueno te lo facilito, aquí esta:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>
  6. <style type="text/css">
  7. html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
  8. body {font-family:verdana, arial, sans-serif; font-size:76%;}
  9. #background{position:absolute; z-index:1; width:100%; height:100%;}
  10. #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
  11. #content {padding:5px 300px 20px 200px;}
  12. p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
  13. #fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
  14. </style>
  15. </head>
  16. <body>
  17. <div>
  18.     <img id="background" src="rabbit.jpg" alt="" title="" /><!--Imagen de fondo que no se mueve-->
  19. </div>
  20. <div id="fixed">
  21.     <p>Un contenido Fijo</p>
  22. </div>
  23. <div id="scroller">
  24.     <div id="content">  
  25.         <p>Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo </p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo </p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo </p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  26.     </div>
  27. </div>
  28. </body>
  29. </html>

Trabajo de Stu Nichols. de CSSplay
__________________
WFC
codigo82

Última edición por willyfc; 18/06/2009 a las 13:32
  #5 (permalink)  
Antiguo 13/06/2009, 15:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años
Puntos: 361
Respuesta: Imagen de fondo autoajustable

Hola:

No sé a que te refieres ahora, pero prueba en tu navegador Ver -> Código fuente y estúdiatelo con calma.

Saludos.

  #6 (permalink)  
Antiguo 13/06/2009, 15:17
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años
Puntos: 361
Respuesta: Imagen de fondo autoajustable

willyfc ¡¡caya choque!! ¡¡me haf dejado fin dientef!!

Saludof.

  #7 (permalink)  
Antiguo 13/06/2009, 15:36
 
Fecha de Ingreso: mayo-2008
Mensajes: 315
Antigüedad: 9 años, 2 meses
Puntos: 7
Respuesta: Imagen de fondo autoajustable

Cita:
Iniciado por willyfc Ver Mensaje
tenías que ver el código fuente ahí esta todo lo que usa, que poca atención, , pero bueno te lo facilito, aquí esta:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>
  6. <style type="text/css">
  7. html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
  8. body {font-family:verdana, arial, sans-serif; font-size:76%;}
  9. #background{position:absolute; z-index:1; width:100%; height:100%;}
  10. #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
  11. #content {padding:5px 300px 20px 200px;}
  12. p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
  13. #fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
  14. </style>
  15. </head>
  16. <body>
  17. <div>
  18.     <img id="background" src="rabbit.jpg" alt="" title="" /><!--Imagen de fondo que no se mueve-->
  19. </div>
  20. <div id="fixed">
  21.     <p>Un contenido Fijo</p>
  22. </div>
  23. <div id="scroller">
  24.     <div id="content">  
  25.         <p>Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo </p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo </p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo Contenido principal fijo </p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  26.     </div>
  27. </div>
  28. </body>
  29. </html>

Trabajo de Stu Nichols.
Xd si perdoname nisiquera me acorde disculpa
  #8 (permalink)  
Antiguo 28/06/2011, 18:09
 
Fecha de Ingreso: noviembre-2010
Mensajes: 29
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Imagen de fondo autoajustable

pues fueron de mucha ayuda, les dejo lo que saque...

Código HTML:
body{
	background-image:url(fondo.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;
	-o-background-size: 100% 100%, auto;
	-moz-background-size: 100% 100%, auto;
	-webkit-background-size: 100% 100%, auto;
	background-size: 100% 100%, auto;
}
con eso tuve.
http://javahelp.redsaltillo.net

Última edición por White_King; 28/06/2011 a las 18:11 Razón: puse etiquetas <code> y el estupido foro no las agarra
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 06:39.