Foros del Web » Creando para Internet » Diseño web »

Fondo de la pagina

Estas en el tema de Fondo de la pagina en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/11/2008, 15:07
 
Fecha de Ingreso: enero-2007
Ubicación: Uruapan Michoacan
Mensajes: 23
Antigüedad: 10 años, 10 meses
Puntos: 0
Fondo de la pagina

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
  #2 (permalink)  
Antiguo 23/11/2008, 12:02
Avatar de erlingfiallos  
Fecha de Ingreso: febrero-2005
Ubicación: Mexico ahora
Mensajes: 499
Antigüedad: 12 años, 10 meses
Puntos: 9
Respuesta: Fondo de la pagina

Podrias explicar mejor en que lugar de tu pagina pondras el fondo.. si sera parte del body o sera parte de algun div.. ???
  #3 (permalink)  
Antiguo 23/11/2008, 13:29
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Fondo de la pagina

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.
  #4 (permalink)  
Antiguo 23/11/2008, 14:28
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Fondo de la pagina

Si se puede.
  #5 (permalink)  
Antiguo 23/11/2008, 14:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fondo de la pagina

Hace ya unas fechas, Mikmoro publicó cómo realizarlo (con css, naturalmente )
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 23/11/2008, 16:38
Avatar de erlingfiallos  
Fecha de Ingreso: febrero-2005
Ubicación: Mexico ahora
Mensajes: 499
Antigüedad: 12 años, 10 meses
Puntos: 9
Respuesta: Fondo de la pagina

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..
  #7 (permalink)  
Antiguo 23/11/2008, 18:30
 
Fecha de Ingreso: enero-2007
Ubicación: Uruapan Michoacan
Mensajes: 23
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Fondo de la pagina

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:
<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="Link de la imagen" alt="" /></div>
</body>
Ahora pueden cerrar el tema, o lo que proceda.

Saludos
  #8 (permalink)  
Antiguo 24/11/2008, 09:30
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Fondo de la pagina

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.
  #9 (permalink)  
Antiguo 24/11/2008, 13:42
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Fondo de la pagina

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...
  #10 (permalink)  
Antiguo 25/11/2008, 12:54
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Fondo de la pagina

Muy bien, entonces buzu cómo se hace, muéstralo.
  #11 (permalink)  
Antiguo 25/11/2008, 15:44
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Fondo de la pagina

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.
  #12 (permalink)  
Antiguo 25/11/2008, 17:56
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Fondo de la pagina

Tienes razón al decir que "no vale la pena hacerlo", pero no creo que sea una tontería. Muy ingenioso.
  #13 (permalink)  
Antiguo 25/11/2008, 17:59
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Fondo de la pagina

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.
  #14 (permalink)  
Antiguo 25/11/2008, 18:03
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Fondo de la pagina

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?
  #15 (permalink)  
Antiguo 25/11/2008, 18:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo de la pagina

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)
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 25/11/2008, 18:49
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Fondo de la pagina

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.
  #17 (permalink)  
Antiguo 25/11/2008, 19:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo de la pagina

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.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 25/11/2008, 19:07
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Fondo de la pagina

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.
  #19 (permalink)  
Antiguo 25/11/2008, 19:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo de la pagina

Cita:
Iniciado por buzu Ver Mensaje
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"
__________________
Visita mi nueva web idplus.org
  #20 (permalink)  
Antiguo 26/11/2008, 00:02
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Fondo de la pagina

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.
  #21 (permalink)  
Antiguo 01/12/2008, 16:29
 
Fecha de Ingreso: enero-2007
Ubicación: Uruapan Michoacan
Mensajes: 23
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Fondo de la pagina

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

Última edición por JAMIROCB; 16/01/2009 a las 12:47
  #22 (permalink)  
Antiguo 01/12/2008, 18:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fondo de la pagina

¿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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #23 (permalink)  
Antiguo 01/12/2008, 19:16
 
Fecha de Ingreso: enero-2007
Ubicación: Uruapan Michoacan
Mensajes: 23
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Fondo de la pagina

Cita:
Iniciado por kseso? Ver Mensaje
¿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
  #24 (permalink)  
Antiguo 02/12/2008, 07:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fondo de la pagina

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 02/12/2008 a las 15:27
  #25 (permalink)  
Antiguo 02/12/2008, 15:04
 
Fecha de Ingreso: enero-2007
Ubicación: Uruapan Michoacan
Mensajes: 23
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Fondo de la pagina

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
  #26 (permalink)  
Antiguo 02/12/2008, 15:21
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Fondo de la pagina

quita los /* */ que rodean a black.
__________________
twitter: @imbuzu
  #27 (permalink)  
Antiguo 02/12/2008, 15:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fondo de la pagina

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:
<style type="text/css">
body {background: #000 url(http://www.paginasprodigy.com/cartag...fondo_prin.jpg) no-repeat 50% 50%;}
</style>
Y disculpas, con las prisas esta tarde me comí un guión en el "no-repeat"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #28 (permalink)  
Antiguo 02/12/2008, 17:24
 
Fecha de Ingreso: enero-2007
Ubicación: Uruapan Michoacan
Mensajes: 23
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Fondo de la pagina

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
  #29 (permalink)  
Antiguo 02/12/2008, 17:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Fondo de la pagina

#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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 18:24.