Foros del Web » Creando para Internet » HTML »

backgound image resizable?

Estas en el tema de backgound image resizable? en el foro de HTML en Foros del Web. Hola, no ando mucho por este foro, pero me ha surgido una duda. Se podría poner una imagen de fondo en una página html, así ...
  #1 (permalink)  
Antiguo 04/02/2005, 06:01
Avatar de scanjet  
Fecha de Ingreso: diciembre-2002
Ubicación: Tenerife - Islas Canarias
Mensajes: 575
Antigüedad: 15 años
Puntos: 2
backgound image resizable?

Hola, no ando mucho por este foro, pero me ha surgido una duda.

Se podría poner una imagen de fondo en una página html, así como un logo, que según la ventana se rezisara la imagen también, es decir si maximizas la ventana el logo se maximize para ocupar el mismo porcentaje de la página y centrado en ésta.

Espero haberme explicado bien, Gracias por adelantado

Saludos
__________________
El conocimiento no ocupa lugar, pero mi base de datos se desborda...
Estudio SJ - Portal de Noticias y Recursos de Diseño Grafico
  #2 (permalink)  
Antiguo 04/02/2005, 06:24
Avatar de Ausiàs  
Fecha de Ingreso: mayo-2004
Ubicación: País Valenciano
Mensajes: 78
Antigüedad: 13 años, 6 meses
Puntos: 0
Igual amb javascript es pot fer, perquè amb CSS no.
-------
Igual con javascript se puede hacer porque con CSS no.
__________________
La web de mi cortometraje:
http://www.perdiendoeljuicio.com
  #3 (permalink)  
Antiguo 04/02/2005, 06:35
Avatar de scanjet  
Fecha de Ingreso: diciembre-2002
Ubicación: Tenerife - Islas Canarias
Mensajes: 575
Antigüedad: 15 años
Puntos: 2
voy a comentarlo en el foro de javascript

Gracias Ausiàs
__________________
El conocimiento no ocupa lugar, pero mi base de datos se desborda...
Estudio SJ - Portal de Noticias y Recursos de Diseño Grafico
  #4 (permalink)  
Antiguo 04/02/2005, 06:47
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Tal vez lo que puedas hacer es simular el fondo sin que la imagen sea un fondo.

Por ejemplo, meter la imagen dentro de una capa de posicionamiento absoluto con un index-z inferior a cualquier otro elemento. Asignarle dimensiones en % a esa capa y a la imagen dentro de esa capa asignarle dimensiones en % también
  #5 (permalink)  
Antiguo 04/02/2005, 07:56
Avatar de Max13  
Fecha de Ingreso: octubre-2000
Ubicación: Mx
Mensajes: 1.229
Antigüedad: 17 años, 1 mes
Puntos: 0
Resizara???? Y eso que es????
  #6 (permalink)  
Antiguo 04/02/2005, 07:58
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por Max13
Resizara???? Y eso que es????
... del verbo resizar como downlodear, uplodear, submitir y rebootar
  #7 (permalink)  
Antiguo 04/02/2005, 10:20
Avatar de Ausiàs  
Fecha de Ingreso: mayo-2004
Ubicación: País Valenciano
Mensajes: 78
Antigüedad: 13 años, 6 meses
Puntos: 0
Mmmm, tunait eres fenomenal :D !
__________________
La web de mi cortometraje:
http://www.perdiendoeljuicio.com
  #8 (permalink)  
Antiguo 04/02/2005, 10:43
Avatar de scanjet  
Fecha de Ingreso: diciembre-2002
Ubicación: Tenerife - Islas Canarias
Mensajes: 575
Antigüedad: 15 años
Puntos: 2
Cita:
Iniciado por tunait
Tal vez lo que puedas hacer es simular el fondo sin que la imagen sea un fondo.

Por ejemplo, meter la imagen dentro de una capa de posicionamiento absoluto con un index-z inferior a cualquier otro elemento. Asignarle dimensiones en % a esa capa y a la imagen dentro de esa capa asignarle dimensiones en % también
Creo que me he perdido un poco, podrias explicarme o en su defecto referirme a algun sitio donde lo expliquec, lo de las capas en html, y como hacer ese posicionamiento absoluto con indez-z.

Gracias
__________________
El conocimiento no ocupa lugar, pero mi base de datos se desborda...
Estudio SJ - Portal de Noticias y Recursos de Diseño Grafico
  #9 (permalink)  
Antiguo 04/02/2005, 13:02
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Bueno, luego de escribir el mensaje se me ocurrió que de hecho ni la capa es necesaria, prueba con algo así

Código:
<style type="text/css">
#imagenfondo{
	position: absolute;
	z-index: 0;
	width: 20%;
	left: 40%;

}
</style>
luego inserta el logo y dale por id imagenfondo y asegúrate de que no tenga propiedad width ni height

<img id="imagenfondo" src="logo.gif" />

prueba a ver...
  #10 (permalink)  
Antiguo 04/02/2005, 13:04
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por Ausiàs
Mmmm, tunait eres fenomenal :D !
...uish, gracias
  #11 (permalink)  
Antiguo 04/02/2005, 13:26
Avatar de scanjet  
Fecha de Ingreso: diciembre-2002
Ubicación: Tenerife - Islas Canarias
Mensajes: 575
Antigüedad: 15 años
Puntos: 2
no me funciona ¿?

soy algo patosillo, he!!
__________________
El conocimiento no ocupa lugar, pero mi base de datos se desborda...
Estudio SJ - Portal de Noticias y Recursos de Diseño Grafico
  #12 (permalink)  
Antiguo 04/02/2005, 13:27
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
jé, pera que te cuelgo un ejemplo onlain ....
  #13 (permalink)  
Antiguo 04/02/2005, 13:31
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
... muy bonito no es, pero que ilustra el tema

http://www.tunait.com/pruebas/fondoresizable.html

Si redimensionas la ventana verás que la imagen se adapta en tamaño y posición
  #14 (permalink)  
Antiguo 04/02/2005, 13:38
Avatar de scanjet  
Fecha de Ingreso: diciembre-2002
Ubicación: Tenerife - Islas Canarias
Mensajes: 575
Antigüedad: 15 años
Puntos: 2
ok, gracias
voy ahorita a mirarlo

por cierto, gracias por tu paciencia!!
__________________
El conocimiento no ocupa lugar, pero mi base de datos se desborda...
Estudio SJ - Portal de Noticias y Recursos de Diseño Grafico
  #15 (permalink)  
Antiguo 04/02/2005, 13:52
Avatar de scanjet  
Fecha de Ingreso: diciembre-2002
Ubicación: Tenerife - Islas Canarias
Mensajes: 575
Antigüedad: 15 años
Puntos: 2
ok, ahora si me funciona, solo me queda como hacer un fixed a la imagen, para que se quede clavada al fondo, si tenés alguna idea te lo agradesco, de todas formas voy a ir mirando y probando que así se aprende.

Gracias denuevo
__________________
El conocimiento no ocupa lugar, pero mi base de datos se desborda...
Estudio SJ - Portal de Noticias y Recursos de Diseño Grafico
  #16 (permalink)  
Antiguo 04/02/2005, 14:02
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Para mozilla y navegadores con correcto soporte para css bastaría con darle un position: fixed, pero no furula para explorer, así que para explorer habrá que meter algo de javascript.

Preparo un ejemplo y te aviso
  #17 (permalink)  
Antiguo 04/02/2005, 14:10
Avatar de scanjet  
Fecha de Ingreso: diciembre-2002
Ubicación: Tenerife - Islas Canarias
Mensajes: 575
Antigüedad: 15 años
Puntos: 2
Mira
probando probando

encontre la manera de fijar la imagen de fondo como quería en un principio, hombre, no hace el resize pero el efecto es tener siempre el logo en el centro de la página:

el codigo usado es:

<style type="text/css">
body {
background: white url(images/fondo1.jpg);
background-attachment: fixed;
background-position: middle;
background-position: center;
background-repeat: no-repeat;

}
</style>

A lo mejor sigo probando y consigo hacer el rezise.

Gracias y espero que este código le sirva a alguien tanto como a mi, Saludos
__________________
El conocimiento no ocupa lugar, pero mi base de datos se desborda...
Estudio SJ - Portal de Noticias y Recursos de Diseño Grafico
  #18 (permalink)  
Antiguo 04/02/2005, 14:35
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Ah, pero esa es la solución conocida (de hecho está en las FAQ)

pero a los fondos no se les puede asignar dimensiones.

Bueno igual, la chapuza para explorer en caso de querer el famoso resizable del verbo resizar (yo resizo el resiza nosotros resizeamos) para el simulacro de fondo sería algo como ....

Código:
<style type="text/css">
#imagenfondo{
	position: absolute;
	z-index: 0;
	width: 20%;
	left: 40%;

}
html > body > img#imagenfondo{
	position: fixed;
}
</style>
Eso en cuanto a los css

en cuanto a la parte de javascript para explorer...

Código:
<script type="text/javascript">
var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
if(tunIex && navigator.userAgent.indexOf('Opera')>=0){tunIex = false}
if(tunIex){
	window.onscroll = function(){
		document.getElementById('imagenfondo').style.top = document.body.scrollTop
	}
}
</script>
eso sí ... importante para que este truco furule

El DTD debe ser para html

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
... o que no tenga DTD, aunque siempre lo correcto es ponerlo

Eso sí .... en explorer queda chapucero, pues la imagen pega pequeños saltitos
  #19 (permalink)  
Antiguo 10/02/2005, 11:28
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

había un tema que resolvía ésto con CSS. Lo estuve revisando y agregué una última (no necesariamente definitiva) versión.

Colocar imágenes en las esquinas

saludos

furoya
  #20 (permalink)  
Antiguo 10/02/2005, 14:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola a todos:

hace tiempo hubo un tema parecido: http://www.forosdelweb.com/f4/pregunta-muchos-background-tabla-211433/ aunque en ese caso se trataba de tablas, el ejemplo supongo que puede valer.

Tunait: Un ejemplo muy interesante... ¡Enhorabuena!

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #21 (permalink)  
Antiguo 12/02/2005, 11:46
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola de nuevo :

tunait : soy un bestia. Por suerte está Caricatos ( ) que es un caballero y muestra el camino. Puse un enlace y ni miré tu ejemplo. Está muy bueno, recién lo probé; y vi los trémolos en el IE.

No sé si te sirve o si tienes ganas de probar, pero creo recordar que vi un bloque de menúes que tenía un efecto al desplazarse. Era algo así : al rodar la página el menú se iba como si nada, pero al detener el arrastre empezaba a desplazarse paso a paso reduciendo su velocidad hasta llegar a la posición que debe mantener en el documento. No evitaba el corrimiento de lugar, pero hacía su 'restauración' más un poco menos violenta.

No sé si me expliqué bien. Aún no almorcé y no creo que pueda explicarme mejor.

saludos

furoya
  #22 (permalink)  
Antiguo 12/02/2005, 12:24
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola a todos.

Os dejo un enlace que os puede interesar. Sirve para simular la position:fixed en IE, solo utiliza Css y queda bastante majo:

http://www.tierradenomadas.com/rc012.phtml

En la parte de abajo de la página hay un enlace para que podais ver un ejemplo.

Saludos,
  #23 (permalink)  
Antiguo 12/02/2005, 19:42
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 9 meses
Puntos: 9
a ver que te parece esto

<html><head>
</head><body style=margin:0;overflow:hidden;>
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr><td>
<div style=position:absolute;width:100%;height:100%;ove rflow:auto;color:white;>
<script>
var a=screen.width,b;
if(a==640){a=64;b=32;} // dependiendo del tamaño de la imagen, y de la resolucion
if(a==800){a=80;b=40;} // por defecto en que se muestra a tamaño real. Estos son
if(a==1024){a=102;b=51;} // para una imagen de 102*51.
document.write('<img src=c:/mi/imagen/faz.gif width='+a+' height='+b+' style=position:absolute;>')// IMAGEN DEL LOGO
</script>
<!-- Aqui va el resto de la pagina -->
</div>
<img src='c:/mi/imagen/margenestrellas.gif' width=100% height=100% galleryimg=no><!-- IMAGEN DE FONDO -->
</td></tr></table></body><html>

Última edición por programeitor; 13/02/2005 a las 13:19
  #24 (permalink)  
Antiguo 14/02/2005, 14:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola JavierB : ése es justamente el código que deja un espacio a la derecha en IE.

saludos

furoya
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 22:22.