backgound image resizable?

[scanjet]

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

[Ausiàs]

Igual amb javascript es pot fer, perquè amb CSS no.
-------
Igual con javascript se puede hacer porque con CSS no.

[scanjet]

voy a comentarlo en el foro de javascript

Gracias Ausiàs

[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

[Max13]

Resizara???? Y eso que es????

[tunait]

Iniciado por Max13

Resizara???? Y eso que es????

... del verbo resizar como downlodear, uplodear, submitir y rebootar

[Ausiàs]

Mmmm, tunait eres fenomenal :D !

[scanjet]

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

[tunait]

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...

[tunait]

Iniciado por Ausiàs

Mmmm, tunait eres fenomenal :D !

...uish, gracias

[scanjet]

no me funciona ¿?

soy algo patosillo, he!!

[tunait]

jé, pera que te cuelgo un ejemplo onlain ....

[tunait]

... 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

[scanjet]

ok, gracias
voy ahorita a mirarlo

por cierto, gracias por tu paciencia!!

[scanjet]

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

[tunait]

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

[scanjet]

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

[tunait]

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

[furoya]

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

[caricatos]

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

[furoya]

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

[JavierB]

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,

[programeitor]

<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>

[furoya]

Hola JavierB : ése es justamente el código que deja un espacio a la derecha en IE.

saludos

furoya