Jump to content

Fondo Autoajustable a resolucion de pantalla


Recommended Posts

Primera vez que recurro a esta parte del foro =O weno vamos al grano, estoy haciendo una web, es resimple asi que no quizimos pagar jaja... pero tengo un problemilla, es una tontera quizas pero quiero lograrlo, busque y busque y no encontre lo que queria en la web.

 

Tengo de fondo una imagen y quiero que se acomode a la resolucion de pantalla, osea que se ajuste al porte de la pantalla ya sea si entro en 800*600 o si entro en 1280*1024, pero siempre manteniendo la sproporciones de ancho y alto.

 

Lo que logre es que se acomode, pero no mantiene la relacion de aspecto, asi que si se deforma, aunque se nota repoco en ciertas resoluciones pero se nota xD y si restauro la ventana del navegador y la achico, tambien se me achica y acomoda al tamaño de la ventan y se deformaapo, y no quiero eso, quiero que el fondo quede del mismo porte y salgan las barras pa scrolear la pagina po.

 

La estoy haciendo en dreamweaver 8, y eso xD

 

Ejemplos:

 

1.- Como me queda a mi, se acomoda a cualqueir esolucion de pantalla, pero se deforma y se nota al cambiar el tamaño de la ventana y en resoluciones para pantallas wide por ejemplo.

 

Ventana maximizada (todo bn en 4:3)

 

 

b4kNA.jpg

 

 

Ventana "achicada" (aqui queda la caga xD)(ahi esta el mismo fondo de primus en mi pagina pa que se como se deforma)

 

 

brqnV.png

 

 

 

 

2.- Y aqui otro ejemplo de lo que no quiero y que un amigo me dijo que hiciera xD el fondo se achica junto con la ventana manteniendo su relacion sin deformarse, pero no quiero eso.

 

 

5cIkJ.png

 

 

 

 

 

3.- Como quiero que quede, El fondo queda fijo, no cambia su forma ni tamaño y aparecen las barras para scrollear la pagina. (Fue la unica wea de pagina que pille con un fondo que no sea de un solo color y se notara lo que quiero xD)

 

Ventana Maximizada:

 

 

0DTOr.png

 

 

Ventana "Achicada":

 

5nUAo.png

 

 

 

Se entendio?? si quieren puedo poner el codigo o unos pantallazos de ejemplos de lo que quiero... eso gracias... saludos, ojala me puedan ayudar.

 

chauz

Edited by pobodyisnerfect
Link to comment
Share on other sites

Con un script que te detecte la resolución y que cargue la imagen background con la resolución deseada....aunque para eso deberías teneren una carpeta (fondos por ej) la misma imagen en las distintas resoluciones que existan.

 

 

Saludos :mgay:

Link to comment
Share on other sites

si puedes hazlo mediante js

 

<body onload="e=document.getElementById('id_elemento'); body=document.getElementsByTagName('body')[0]; e.style.width=body.scrollWidth+'px'; e.style.height=body.scrollHeight+'px';" style="margin 0px 0px 0px 0px; padding:0px 0px 0px 0px;">

<div id="id_elemento"></div>

y lo unico que falta es el elemento que vaa llenar tu body

Link to comment
Share on other sites

no te capto mucho la idea, podrías poner algún ejemplo

 

Mañna subo una scap pa que se cache bn la idea...

 

Con un script que te detecte la resolución y que cargue la imagen background con la resolución deseada....aunque para eso deberías teneren una carpeta (fondos por ej) la misma imagen en las distintas resoluciones que existan.

 

 

Saludos :mgay:

 

jajaja que paja xD

 

si puedes hazlo mediante js

 

<body onload="e=document.getElementById('id_elemento'); body=document.getElementsByTagName('body')[0]; e.style.width=body.scrollWidth+'px'; e.style.height=body.scrollHeight+'px';" style="margin 0px 0px 0px 0px; padding:0px 0px 0px 0px;">

<div id="id_elemento"></div>

y lo unico que falta es el elemento que vaa llenar tu body

 

 

vamo a cachar que onda

Link to comment
Share on other sites

no te capto mucho la idea, podrías poner algún ejemplo

 

Mañna subo una scap pa que se cache bn la idea...

 

Con un script que te detecte la resolución y que cargue la imagen background con la resolución deseada....aunque para eso deberías teneren una carpeta (fondos por ej) la misma imagen en las distintas resoluciones que existan.

 

 

Saludos :mgay:

 

jajaja que paja xD

 

si puedes hazlo mediante js

 

<body onload="e=document.getElementById('id_elemento'); body=document.getElementsByTagName('body')[0]; e.style.width=body.scrollWidth+'px'; e.style.height=body.scrollHeight+'px';" style="margin 0px 0px 0px 0px; padding:0px 0px 0px 0px;">

<div id="id_elemento"></div>

y lo unico que falta es el elemento que vaa llenar tu body

 

 

vamo a cachar que onda

 

se me olvido decirte que mi propuesta era para el alto y ancho del elemento html, te dejo uno para el ancho y alto de la pantalla

 

<body onload="

e=document.getElementById('id_elemento');

e.style.height=window.screenY+'px';

e.style.width=window.screenX+'px';

e.style.width=window.screenLeft"+'px';

e.style.height=window.screenTop"+'px';"

 

style="margin 0px 0px 0px 0px; padding:0px 0px 0px 0px;">

<div id="id_elemento"></div>

Edited by cañangasñangas
Link to comment
Share on other sites

Mmmmm, pero el fondo no mantiene su tamaño y su relacion alto ancho cuando achicas la pantalla, de echo asi esta mi fondo, no quiero que pase eso... mmm no cacho. A menos que sea por el navegador, estoy en firefox 8.

 

En ese script lo que hace es redimensionar la imagen de acuerdo al tamaño de la pantalla, pero siempre mantiene su relacion de aspecto, la imagen no la deforma, solo la adecua para ocupar toda la pantalla pero manteniendo el aspect ratio

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...