¿Cómo hago para diseñar una imagen de fondo para un sitio web receptivo?

He estado buscando todo el día una respuesta o una guía, pero parece que no puedo encontrar nada. Puede que me esté perdiendo una palabra clave aquí.

Tengo un sitio web de una sola página para el que me gustaría diseñar una imagen de fondo en Photoshop o Illustrator. Me gustaría poder diseñar esta imagen alrededor de los elementos de la página web. Esto no sería demasiado difícil de diseñar para un tamaño de pantalla específico, pero la posición de los elementos y el ancho de la pantalla pueden cambiar drásticamente de un dispositivo a otro. Solo tengo dos ideas de cómo hacer esto, ninguna de las cuales parece un buen método:

  1. Cree una imagen de fondo que ignore los elementos de la página y que no tenga demasiados detalles a la derecha/izquierda para que se corte en los dispositivos móviles.
  2. Cree una imagen de fondo separada para cada tamaño de dispositivo y use consultas de medios para cargar la imagen correcta.

¿Hay una mejor manera de hacer esto?

Aquí hay un ejemplo de lo que estoy hablando:

ingrese la descripción de la imagen aquí

Respuestas (2)

Creo que lo ideal para los sitios web móviles es eliminar o reducir la cantidad de imágenes que se cargan para acelerar el tiempo de carga y mejorar la legibilidad.

Por lo tanto, usaría consultas de medios, pero no para cargar diferentes imágenes para dispositivos móviles, sino para no cargar ninguna imagen para dispositivos móviles. Me apegaría a colores o degradados renderizados con CSS simples en lugar de imágenes para un sitio móvil.

Cuando diseño contenido receptivo, siempre lo veo como:

  • Escritorio: todas las imágenes, diseño completo
  • Tablet: algunas imágenes, si es necesario simplifique el diseño
  • Teléfono: imágenes mínimas, simplifique el diseño tanto como sea posible

Para mí, la navegación móvil es mucho más transmitir la información en lugar de mostrar todas las campanas y silbatos posibles. Quiero que los usuarios que ven en su teléfono puedan obtener información rápidamente y sin desorden, ya que la mayoría de las veces están navegando, bueno, mientras están en el móvil y no están sentados en algún lugar leyendo sitios web.

Usa CSS {background-size: cover} (también puedes jugar con la posición)

Y sí, puede usar algunas consultas de medios para cargar un fondo diferente.

¿Cómo hago para diseñar una imagen de fondo para un sitio web receptivo?
RespuestasAquíPolítica de privacidad1y, 0v