Foros del Web » Creando para Internet » CSS »

Aplicar imagen de fondo a toda la página

Estas en el tema de Aplicar imagen de fondo a toda la página en el foro de CSS en Foros del Web. Hola compañeros, Mi problema puede parecer muy sencillo pero por más que intento darle una solución no lo consigo... Lo que yo quiero es tener ...
  #1 (permalink)  
Antiguo 17/05/2008, 07:22
 
Fecha de Ingreso: abril-2008
Mensajes: 22
Antigüedad: 9 años, 7 meses
Puntos: 0
Aplicar imagen de fondo a toda la página

Hola compañeros,
Mi problema puede parecer muy sencillo pero por más que intento darle una solución no lo consigo...
Lo que yo quiero es tener una imagen de fondo en una página; para esto no tengo problema aplicando un atributo "background" de la etiquta body en una css; el problema es que mi imagen es de 1024x768 y para cualquier resolución no consigo que la imagen "se estire" abarcando todo el contenido de la página; si el contenido es mayor de esos 1024, y por lo tanto tiene scroll la parte inferior de la página queda sin fondo, quedando bastante mal y si por el contrario el contenido es menor de esos 768px, se corta la imagen, cosa que también queda mal.

¿Hay alguna solución?

Muchas gracias, un saludo
  #2 (permalink)  
Antiguo 17/05/2008, 07:30
 
Fecha de Ingreso: julio-2004
Mensajes: 25
Antigüedad: 13 años, 5 meses
Puntos: 0
Respuesta: Aplicar imagen de fondo a toda la página

Mirate esto:
http://code.google.com/p/doctype/wiki/BackgroundCSSProperty
http://code.google.com/p/doctype/wiki/BackgroundPositionCSSProperty
http://code.google.com/p/doctype/wiki/BackgroundRepeatCSSProperty

Juega con esos valores hasta que te guste.

Saludos
  #3 (permalink)  
Antiguo 17/05/2008, 14:28
 
Fecha de Ingreso: abril-2008
Mensajes: 22
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Aplicar imagen de fondo a toda la página

Gracias por la respuesta; pero lo que yo buscaba era saber si alguna manera de que la imagen que está asociada al fondo (background) del body se puede estirar/encoger en función del contenido de la página; es posible que quizá eso tampoco quede muy bien porque se deformaría la imagen...
La cuestión es que tengo que "customizar" un poco una aplicación PHP que me han dado y he pensado que una buena idea sería la de la imagen pero no me está dando buen resultado así que a lo mejor me podíais dar alguna otra sugerencia que sustituya mi idea inicial:)

Saludos y gracias
  #4 (permalink)  
Antiguo 18/05/2008, 12:20
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Aplicar imagen de fondo a toda la página

esto no se puede hacer con css que yo sepa. intenta preguntar en el foro de javascript.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #5 (permalink)  
Antiguo 18/05/2008, 13:37
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: Aplicar imagen de fondo a toda la página

Lo que dices se puede hacer simulando el fondo sin serlo. Me explico: creas una capa en posicón absoluta y del 100% en ambos sentidos, en ella metes la imagen y le das tambien un 100% en mabos sentidos. La pones lo primero de todo en el html. De esa manera, todos los elementos irán sobre ella simulando ser un fondo, y se reducirá o aumentará (deformándose, claro), con la ventana del navegador.

Mira este ejemplo

Mikel.
  #6 (permalink)  
Antiguo 18/05/2008, 13:59
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Aplicar imagen de fondo a toda la página

hable muy pronto, se me había olvidado este ejemplo:
http://www.cssplay.co.uk/layouts/background.html
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #7 (permalink)  
Antiguo 18/05/2008, 15:52
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: Aplicar imagen de fondo a toda la página

Cita:
Iniciado por juaniquillo Ver Mensaje
hable muy pronto, se me había olvidado este ejemplo:
http://www.cssplay.co.uk/layouts/background.html
No, efectivamente no se podía hacer con un background, como pedía el usuario.

Mikel.
  #8 (permalink)  
Antiguo 19/05/2008, 04:03
 
Fecha de Ingreso: abril-2008
Mensajes: 22
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Aplicar imagen de fondo a toda la página

Cita:
Iniciado por Mikmoro Ver Mensaje
No, efectivamente no se podía hacer con un background, como pedía el usuario.

Mikel.
Hombre, no es la idea que yo tenía pensado en un momento, pero puede estar bien...
Cuál es la forma de conseguir ese efecto; con la solución que ha propuesto Mikmoro??

Gracias, un saludo
  #9 (permalink)  
Antiguo 19/05/2008, 04:07
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: Aplicar imagen de fondo a toda la página

Sí, eso es. Mira el código del enlace que he puesto y verás que es sencillísimo.

Mikel.
  #10 (permalink)  
Antiguo 19/05/2008, 12:36
 
Fecha de Ingreso: abril-2008
Mensajes: 22
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Aplicar imagen de fondo a toda la página

Gracias Mikel por el apunte; lo he probado y no termina de funcionarme y como ya dije es una aplicación ya desarrollada y tengo un poco de prisa por lo que no puedo perder mucho más tiempo en este tema por lo que he pensado otra solución; pero agradecería que alguien me comentara cómo conseguir el efecto de la página que ha puesto juaniquillo que también me podría venir bastante bien.

Un saludo y gracias por vuestra ayuda.
  #11 (permalink)  
Antiguo 19/05/2008, 12:40
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Aplicar imagen de fondo a toda la página

¡Yo estuve buscando esta solución hace mucho tiempo! ¿Por que nadie me dijo que era tan sencillo? XD

Excelente solución, recordaré aplicarla si la necesito de nuevo. ¡Gracias!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 19/05/2008, 13:10
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: Aplicar imagen de fondo a toda la página

Cita:
Iniciado por makos83 Ver Mensaje
Gracias Mikel por el apunte; lo he probado y no termina de funcionarme y como ya dije es una aplicación ya desarrollada y tengo un poco de prisa por lo que no puedo perder mucho más tiempo en este tema por lo que he pensado otra solución; pero agradecería que alguien me comentara cómo conseguir el efecto de la página que ha puesto juaniquillo que también me podría venir bastante bien.

Un saludo y gracias por vuestra ayuda.
La solución que aportaba juaniquillo, es un bonito truco, haciendo que el contenido esté en una caja con scroll, lo que hace parecer que la página baja y el fondo queda estático, pero no es así; es que sólo la caja de contenido es la que hace scroll dando esa sensación.

El código es este, y es más bien entendible Si algo no lo ves claro pregunta y te echaremos una mano.

Cita:
<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="" />
</div>
<div id="fixed">
<p>The background image is always 100% x 100% (body size). But it only works with a 100% x 100% html/body.</p>
<p><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=100% background image" title="Your comments">Comments</a></p>

</div>
<div id="scroller">
<div id="content">

<h1>ALICE'S ADVENTURES IN WONDERLAND</h1>... etc.
Mikel.
  #13 (permalink)  
Antiguo 19/05/2008, 20:58
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Aplicar imagen de fondo a toda la página

que conste que no es mi aporte, yo puse el enlace...
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 02:54.