Imagen de fondo autoajustable

totolia · #1 (**permalink**) 13/06/2009, 12:35

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.

jomaruro · #2 (**permalink**) 13/06/2009, 13:43

Hola:

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

Saludos.

totolia · #3 (**permalink**) 13/06/2009, 14:29

Si tio, pero no encuentro el codigo a introducir no?

willyfc · #4 (**permalink**) 13/06/2009, 15:14

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>
<style type="text/css"> 
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style> 
</head> 
<body> 
<div> 
    <img id="background" src="rabbit.jpg" alt="" title="" /><!--Imagen de fondo que no se mueve-->
</div> 
<div id="fixed"> 
    <p>Un contenido Fijo</p> 
</div> 
<div id="scroller"> 
    <div id="content">  
        <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 /> 
    </div> 
</div> 
</body> 
</html>

Trabajo de Stu Nichols. de CSSplay

jomaruro · #5 (**permalink**) 13/06/2009, 15:15

Hola:

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

Saludos.

jomaruro · #6 (**permalink**) 13/06/2009, 15:17

willyfc ¡¡caya choque!!

¡¡me haf dejado fin dientef!!

Saludof.

totolia · #7 (**permalink**) 13/06/2009, 15:36

Cita:

Iniciado por willyfc

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>
<style type="text/css"> 
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style> 
</head> 
<body> 
<div> 
    <img id="background" src="rabbit.jpg" alt="" title="" /><!--Imagen de fondo que no se mueve-->
</div> 
<div id="fixed"> 
    <p>Un contenido Fijo</p> 
</div> 
<div id="scroller"> 
    <div id="content">  
        <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 /> 
    </div> 
</div> 
</body> 
</html>

Trabajo de Stu Nichols.

Xd si perdoname nisiquera me acorde disculpa

White_King · #8 (**permalink**) 28/06/2011, 18:09

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