Fondo web escalable (jQuery Backstretch)

kotedas · #1 (**permalink**) 16/11/2010, 12:31

Hola a todos.

Tengo una imagen de 1920 x 1200 en png(tiene un difuminado en la parte de abajo), que quiero que aparezca en mi página web com fondo de pantalla en la parte superior para que se funda con el color de fondo que tambien pondre.

Me gustaría que me explicasen como hacer que esa imagen se vea bien en todas las resoluciones, sin cortes ni repeticiones, que no aparezca scrolls a la primera de cambio vamos, quiero saber como hacer para que esa imagen al igual que toda la web adapte su tamaño a la resolucion de la web.

Espero que puedan ayudarme porque he probado de mil y una formas y no entiendo porque no llega a funcionar.

He leido por ahí que con una imagen de 800x600 no habría problema, yo puedo adaptar mi imagen a 800x600, pero que atributos debería darle para que se adapte todalmente a la página web?.

Esto me trae de cabeza... Gracias de antemano

dargorg · #2 (**permalink**) 16/11/2010, 12:43

En CSS:

background: #color-a-utilizar url('imagen.jpg') no-repeat top left;

kotedas · #3 (**permalink**) 16/11/2010, 13:16

Gracias por contestar.

Si hago eso, la imagen que quiero, no se repite, pero si pruebo la pagina en una resolucion menor(mi equipo tiene una resolución de 1900x1200), pues me aparecen los scrolls lateral y vertical para seguir viendo el fondo entero.

Yo lo que quiero es que no aparezcan scrolls y ese fondo(al igual que toda la web ) se adapte a las dimensiones de la nueva resolución.

ofmjuanabascal · #4 (**permalink**) 16/11/2010, 13:25

Creo que si pones eso debería funcionar:

Código CSS:

Ver originalbody {
background-color: tu color;
background-image: url('imagen.jpg'); 
background-repeat: no-repeat;
overflow:hidden;
}

Saludos; espero que te sirva

DragonX · #5 (**permalink**) 16/11/2010, 14:07

Cita:

Iniciado por kotedas

Hola a todos.

Tengo una imagen de 1920 x 1200 en png(tiene un difuminado en la parte de abajo), que quiero que aparezca en mi página web com fondo de pantalla en la parte superior para que se funda con el color de fondo que tambien pondre.

Código CSS:

Ver originalbody{background:#tu_color url(tu-imagen.jpg) no-repeat center top;}

Slds.-

kotedas · #6 (**permalink**) 17/11/2010, 08:24

Muchas gracias por las respuestas, pero no comprendo, sigue sin hacerse más pequeña la imagen cuando la resolucion es menor.

De todos modos , creo que encontré la solución.

http://srobbin.com/jquery-plugins/jquery-backstretch

Es un script que adapta el tamaño del fondo al tamaño de ventana.

Pero no se instalarlo en mi web <.<, se supone que tengo incluir los archivos de java en la carpeta de mi web luego incluir un pequeño codigo en mi pagina html para activar este script, pero no se donde debo colocar ese codigo, ni tampoco cual es ese codigo, tampoco veo donde poner la url de la imagen que quiero poner de fondo...

Espero que puedan ayudarme. si tengo que cambiar esta pregunta al foro de java, solo avisenmelo.

webosiris · #7 (**permalink**) 21/11/2010, 03:45

ese jquery es lo que buscas, ni con html ni con css puro se puede hacer lo que quieres.
Muevo al foro de JavaScript (que no Java, que eso es otro lenguaje que nada que ver)

Para activarlo, incluye ese código que ves en el sitio que tu mismo enlazas (el que aparece dentro del apartado que dice demo) dentro de la sección <head> de tu página, y enlaza los js (jquery.backstretch.min.js y jquery-1.4.2.min.js) que están en el descargable.

tredio · #8 (**permalink**) 21/11/2010, 18:12

si se me hacia extraño que hicieran eso con background ^^, claro no lo hacen asi, solo toman un div y lo ponen fixed con un z-index negativo bastante grande, dentro de ese div ponen la imagen que redimensionan al cambiar de tamaño la ventana, por si acaso a alguien mas le interesaba saber como lo hacian.