HTML - Problemas con la dimensión al hacer zoom

Buenas a todos, estoy empezando con HTML5 y CSS3 a lo básico y me diseñé una página la cuál me gustaría programar. El caso es que en la página al disminuir el zoom se desconfiguran los backgrounds y otras cosas que quedan bastante extrañas. Me gustaría saber como hacer que los elementos de la página no se desconfiguren al hacer zoom. Gracias.
Perdonen la calidad de las imágenes.
Esta es la página normal (está a medio hacer):
https://i.imgur.com/mjC0Psd.jpg

Así queda la página al disminuir el zoom:
https://i.imgur.com/Yi1UGZq.png

El zoom no es una funcionalidad que utilicen de forma continua todos y cada uno de los usuarios. Más bien es una acción que sólo llevan a cabo los desarrolladores y aquellos usuarios que de verdad lo necesitan.

¿Los visitantes de tu página tendrán necesidad de hacer zoom?

El zoom en el navegador lo que hace es simular un cambio en la resolución de la pantalla manteniendo el tamaño de la misma. Eso se traduce en que cambia el tamaño del píxel. Al hacer zoom+ cada píxel pasa a ser de un tamaño mayor y al hacer zoom- simula un píxel de menor tamaño.

Si se desconfiguran los tamaños de las imagenes y esas cosas, es un problema a la hora de realizar el diseño.
Para los BACKGROUNDS, lo más recomendable es que tome toda la medida de la pantalla, esto se puede lograr con algo más o menos así:


Y el diseño responsive es muy importante a la hora de esto, lo que haces con eso es conseguir adaptar el contenido a cualquier tamaño.

Saludos