> Faqs > Imagen de fondo en mi web que no se repita y que aumente de manera infinita

Imagen de fondo en mi web que no se repita y que aumente de manera infinita

Hola: quisiera poner una foto de fondo fija en mi web pesonal, pero quiero que no se repita y que vaya aumentando hacia abajo segun meto datos, tablas o lo que sea.

Vamos, que la imagen no tenga fin, ponga lo que ponga en mi pagina. Creo que me explico es algo asi:

https://editor.wix.com/html/editor/web/renderer/edit/74fb20de-8737-4dd3-95f6-e1375a252891?editorSessionId=5CF7D9BD-08FE-4DD1-3BAE-46A5BA5BE310&metaSiteId=47d6a498-6d0b-4738-a8cd-17abfca434ef 
Has puesto una URL a un editor de Wix, que para verlo se necesita hacer login. No es un buen ejemplo porque es algo privado y no tenemos el más mínimo interés en registrarnos.

Respuestas

Las imágenes por definición no pueden ser infinitas. Por ello, lo que se hace para que se pueda continuar hasta el final como fondo de cualquier contenedor, es justamente hacer un mosaico. Es casi una limitación física ante la que no se puede hacer nada, pero sí podrías buscar algunas alternativas para conseguir que se solucione esa limitación y hacer que en la práctica ocurra lo que necesitas.

  • Usar una imagen de dimensiones de altura realmente grandes. Está claro que no vas a llegar al infinito, pero sí a lo suficiente para que el efecto quede como necesitas. En este caso además puedes hacer que la imagen acabe en un color sólido y a partir de ahí el fondo sería de ese color sólido, dando continuidad a la imagen. O hacer que la imagen acabe en una transparencia por canal alfa, de las que permite el png, para que se adapte a cualquier tipo de fondo de manera progresiva.
  • Hacer que la imagen de abajo tenga una posición fija, de modo que esté bloqueada y no se mueva al hacer scroll. Esto lo consigues con algo de CSS como este:
body {
  background-image: url("tu-imagen.jpg");
  background-attachment: fixed;
}
  • Por último se me ocurre usar Javascript para hacer que la imagen de abajo tenga un efecto "parallax", de modo que tenga movimiento, pero que no acompañe perfectamente al scroll del documento. Así podrías controlarla por Javascript a tu antojo. Esto sería algo más complejo. Hay librerías que ayudan a hacer estas cosas como Parallax.js.
Gustavo
186 5 13 11

Hola Miguel,

Sin duda una opcion buena es la que comenta Gustavo, de todas formas te dejo otra alternativa por si quieres probar:

html {
        background: url(imagenes/fondo.png) no-repeat center center fixed;
        background-size: cover;
}

Fuente: https://www.lawebera.es/como-hacer/ejemplos-css/expandir-imagen-fondo-css.php

Edit: Añado otros dos enlaces muy completos que seguro que tambien te sirven de ayuda:

https://desarrolloweb.com/articulos/background-origin-css.html

https://desarrolloweb.com/articulos/atributo-overflow-css.html

Ya nos contaras, un saludo

David
95 4 11