Fondo de la pagina

JAMIROCB · #1 (**permalink**) 22/11/2008, 15:07

Hola, buenas tardes, estoy haciendo una pagina, pero deseo que el fondo que tengo se expanda al 100% de la pantalla en cualquier navegador... Me pueden decir como hacer eso?

Muchas gracias de antemano

Si no entendieron mi peticion.. Intentare explicarlo mejor..

Saludos y gracias

erlingfiallos · #2 (**permalink**) 23/11/2008, 12:02

Podrias explicar mejor en que lugar de tu pagina pondras el fondo.. si sera parte del body o sera parte de algun div.. ???

ElJavista · #3 (**permalink**) 23/11/2008, 13:29

Bueno, sea el fondo que sea, hasta donde yo sé no se puede hacer que se expanda siempre. Si alguien conoce algún truco o método genial, pero que yo sepa, no se puede.

buzu · #4 (**permalink**) 23/11/2008, 14:28

Si se puede.

kseso? · #5 (**permalink**) 23/11/2008, 14:38

Hace ya unas fechas, Mikmoro publicó cómo realizarlo (con css, naturalmente

)

erlingfiallos · #6 (**permalink**) 23/11/2008, 16:38

Una forma de hacerlo con CSS poniendole la propiedad al body seria de esta forma

Código:

body {
    background:#FFFFFF url(images/mi_imagen.jpg) repeat-x;
}

Esto sirve cuando la imagen tiene un patron que puede ser facilmente reproducido en el eje x..

JAMIROCB · #7 (**permalink**) 23/11/2008, 18:30

Muchas gracias kseso?, y claro, muchisimas gracias a Mikmoro, ya lo realize

Aqui esta el codigo que utilize (Por si alguien lo necesita directo)

Cita:

Ahora pueden cerrar el tema, o lo que proceda.

Saludos

ElJavista · #8 (**permalink**) 24/11/2008, 09:30

Bien, eso no es poner un fondo, eso es hacer una capa con una imagen que se expanda al 100%, es un truco, no es realmente un fondo, o sea, que como dije, poner un fondo que se expanda no se puede, pero si se puede hacer trucos como este. De todas maneras sirve, así que me parece bien.

buzu · #9 (**permalink**) 24/11/2008, 13:42

Si se puede eljavista. Solo que no lo has pensado lo suficiente. Ahora, el hecho de que se pueda no quiere decir que sea viable hacerlo o que valga la pena. Pero de que se puede se puede. Jamirocb, tu solucion tiene un problema.

P: Que pasa si la ventana es demasiado grande?
R: Se pixelea la imagen.
P:Que pasa si la ventana no mantiene las proporciones de la imagen
R: La imagen se deforma.

Muéstranos la imagen que quieres poner para poder ver si realmente tu truco te soluciona las cosas o solo te crea mas problemas y dinos por que quieres hacer eso...

ElJavista · #10 (**permalink**) 25/11/2008, 12:54

Muy bien, entonces buzu cómo se hace, muéstralo.

buzu · #11 (**permalink**) 25/11/2008, 15:44

Ok, antes aclaro que ya dije que no es lo mas viable, ademas. Estarías loco si lo intentas.

Puedes cargar la pagina y tomar vía js las medidas de la ventana. Envías vía ajax una petición al servidor el cual procesa una imagen gigantesca que ya tienes previamente guardada, la copia, redimenciona y guarda. El servidor te regresa una referencia a esa imagen y tú usas esa referencia para establecerla como fondo de pantalla. Eso lo tendrías que hacer al cargar la pagina y al redimencionar la ventana. Podrías adicionalmente usar una base de datos para ir almacenando referencias a las medidas y checar en la base de datos si hay referencia entonces no procesas la imagen. Es una tontería y no vale la pena hacerlo, pero si se puede que es lo que el usuario pregunta. Si no lo había mencionado es precisamente por que es algo muy loco y no quería que a alguien se le meta la idea y lo haga. Eso sería un insulto al usuario y consumo de recursos innecesario para lograr algo que no vale la pena. Ademas, dependiendo de la imagen, se puede hacer usando CSS (investiguese sobre el uso de patrones en CSS).

PD. Se que me van a colgar algunos

... Tomo el riesgo jajaja.

ElJavista · #12 (**permalink**) 25/11/2008, 17:56

Tienes razón al decir que "no vale la pena hacerlo", pero no creo que sea una tontería. Muy ingenioso.

buzu · #13 (**permalink**) 25/11/2008, 17:59

Si, eso si... Ingeniosos, quizá se pueda encontrar una aplicación a la idea, pero definitivamente no la del fondo de página.

Luego me pongo a volar y se me ocurren esa clase de cosas jajaja.

ElJavista · #14 (**permalink**) 25/11/2008, 18:03

Bueno, en base a lo que has dicho se me ha ocurrido algo que si podría ser útil, porque no hacer fondos para cada resolución existente y mediante javascript reconocer la resolución y aplicar el fondo correspondiente, podría ser, no?

Mikmoro · #15 (**permalink**) 25/11/2008, 18:45

Pero vamos a ver: si tú coges una misma foto y la haces en varias resoluciones:

1.- según su tamaño cambiará la calidad
2.- si la haces con una proporción concreta (digamos 1024 x 768, por ejemplo), al hacerla para otra proporción como una pantalla apaisada (¿se dice wide?), la foto se deformará inevitablemente.

Es decir, que tendrás los mismos problemas.
Para conseguir el mismo resultado pero mucho más sencillo, podemos usar un alto y ancho del 100% (el enlace que mostró kseso?, ejemplo

con lo que la imagen se deforma, o sólo un ancho del 100% (o alto) como en este otro ejemplo, en el que la imagen variará su calidad pero no se deformará.

Creo que, o se retoca cada imagen y por tanto es diferente en cada resolución (realmente diferente visualmente), o el resultado es el mismo.

Por cierto:

Cita:

Hola, buenas tardes, estoy haciendo una pagina, pero deseo que el fondo que tengo se expanda al 100% de la pantalla en cualquier navegador... Me pueden decir como hacer eso?

Todavía no sabemos si se refería a una foto o simplemetne un fondo (repeat)

ElJavista · #16 (**permalink**) 25/11/2008, 18:49

Pero bueno, todo esos problemas de la calidad y la deformación se puede solucionar mediante un tratamiento de imágenes utilizando el famoso Photoshop o el Fireworks, en este sentido creo que eso no sería problema.

Mikmoro · #17 (**permalink**) 25/11/2008, 19:03

Pero una imagen que mida por ejemplo 200 de ancho y 100 de alto, si la necesitas para una pantalla panorámica en 400 de ancho y 100 de alto, muchas virguerías habría que saber hacer con photoshop para dejarla igual (igual se puede pero ni imagino cómo). Será otra imagen, parecida pero distinta, vamos, digo yo. A eso me refería.

buzu · #18 (**permalink**) 25/11/2008, 19:07

Cita:

Todavía no sabemos si se refería a una foto o simplemetne un fondo (repeat)

Eso... jajaja

No funciona lo de hacer cada foto previamente, por que no se ajusta si no se usa la ventana del navegador al 100%. No todos navegan con la ventana ocupando todo el ancho. Mikel, la tontería, digo solución que propongo cambiaría el tamaño manteniendo la proporción. Pero repito, no es buena idea.

Mikmoro · #19 (**permalink**) 25/11/2008, 19:24

Cita:

Iniciado por buzu

la solución que propongo cambiaría el tamaño manteniendo la proporción. Pero repito, no es buena idea.

Puede ser una solución y hay que currarla, claro, pero eso es lo que hace mi segundo ejemplo: mantener la proporción, por eso decía. Es muy simple y con CSS. Tu solución igual puede ser hasta más "divertida"

buzu · #20 (**permalink**) 26/11/2008, 00:02

Si, yo me conformo con tu solución mikmoro. ME parece mejor, si expuse lo del redimencionamiento y todo ese royo fue por que Eljavista me pidió casi casi acusándome de que solo hablaba por hablar (broma) que mostrará como es que si se podía hacer lo de cambiar un fondo como tal y no una imagen truqueada con CSS.

JAMIROCB · #21 (**permalink**) 01/12/2008, 16:29

Perdon por no responder antes...

Codigo utilizado hasta ahora

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<meta content="es-mx" http-equiv="Content-Language" />

<style type="text/css">
#caja { position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#caja img { width: 100%;
height: 100%;
}
.texto { color: #f00;
font-size: 30px;
position: relative;
}
</style>


background: white url();

<body>
<div id="caja"><img src="http://www.paginasprodigy.com/cartagena2710/images/fondo_prin.jpg" alt="" /></div>
</body>

</html>

La pagina esa, es solamente un redireccionador, por lo tanto no lleva mas palabras ni nada, solamente la imagen de fondo.

Link directo de la imagen: http://www.paginasprodigy.com/cartagena2710/images/fondo_prin.jpg

Saludos

kseso? · #22 (**permalink**) 01/12/2008, 18:30

¿Pregunto?
Sí, pero para sugerir una solución:
¿Y para qué quieres una imagen que se adapte (deformándose o perdiendo calidad) para mostrar durante unos instantes?
¿No sería menos problemático y más práctico una imagen degradando hacia los extremos al mismo color y utilizar como color de fondo el mismo?
Creo.

JAMIROCB · #23 (**permalink**) 01/12/2008, 19:16

Cita:

Iniciado por kseso?

¿Pregunto?
Sí, pero para sugerir una solución:
¿Y para qué quieres una imagen que se adapte (deformándose o perdiendo calidad) para mostrar durante unos instantes?
¿No sería menos problemático y más práctico una imagen degradando hacia los extremos al mismo color y utilizar como color de fondo el mismo?
Creo.

Mmm, buena idea.. Pero, cual seria el codigo para hacer eso?

Saludos

kseso? · #24 (**permalink**) 02/12/2008, 07:08

Cita:

body {background: #/*color elegido*/ url(ruta/a/tu/imagen.jpg) no-repeat 50% 50%;}

Aunque podrías hacerlo colocando el color al body y la imagen en un div centrado tanto en la vertical como en la horizontal.
Ya sabes, lo posicionas al 50% y le das un margen negativo que será la mitad de lo que mida el div.
Un saludo

JAMIROCB · #25 (**permalink**) 02/12/2008, 15:04

Mmm, no lo pude hacer... :s

Te agradeceria que me corrigieras el error

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
body {background: #/*black*/ url(http://www.paginasprodigy.com/cartagena2710/images/fondo_prin.jpg) norepeat 50% 50%;}

<meta content="es-mx" http-equiv="Content-Language" />


<TITLE>.:: ILA Uruapan ::. Instituto Latinoamericano </TITLE>
<META http-equiv=Refresh content="2; URL=http://www.paginasprodigy.com/cartagena2710/">


<body>



</body>

</html>

Saludos

buzu · #26 (**permalink**) 02/12/2008, 15:21

quita los /* */ que rodean a black.

kseso? · #27 (**permalink**) 02/12/2008, 15:24

Los estilos incluidos en el head de una página tienen que estar contenidos entre:
<style type="text/css">
</style>
/*todo lo contenido entre estos símbolos en los archivos .css son tomados como comentarios */
Así que deberías poner en tu página:

Cita:

Y disculpas, con las prisas esta tarde me comí un guión en el "no-repeat"

JAMIROCB · #28 (**permalink**) 02/12/2008, 17:24

Ok... Gracias..

El no-repeat lo tuve que modificar a: no-repeat 50% -10%, ya que si lo dejaba con el 50% en el segundo, salia solamente la mitad de la imagen... Pero con eso lo corregi...

Otra duda.. Si en lugar de el fondo negro, deseo que sea blanco, cual seria el numero del color? Ya que con fondo negro no convina..

Saludos y gracias

kseso? · #29 (**permalink**) 02/12/2008, 17:34

#fff o #ffffff (es lo mismo)
En la mayoría de editores (tipo PSPad editor) tienen opciónes para capturar, convertir o seleccionar un color, valores hexadecimales y su equivalente a RGB.