Responsive: como usar imagenes de distinto tamaño, como fondo según el dispositivo

[z3r0]

Muchas gracias por el link. Lo leí. Honestamente no tengo ni la menor idea de que tendría que poner y no me aclaró mucho. Si tenía alguna relación con lo que pregunté no la pesqué.

El link dice en parte:

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

Aplicado a lo que pregunté: Que significa...? Que en el caso de lo que pregunté tendría que poner esa parte de @media screen and (min-width:) tantas veces como tamaño de imagenes haya hecho, en el css?

Ejemplo:

#banner {
background-attachment: scroll, scroll, scroll, fixed;
background-color: #645862;
background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("images/overlay.png"), url("../../images/banner.jpg");
background-position: bottom left, bottom right, top left, top center;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
background-size: 25em, 25em, auto, cover;
color: #fff;
cursor: default;
padding: 6em 0;
text-align: center;


@media screen and (min-width: 320px) {
body {
background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("images/overlay.png"), url("../../images/banner320.jpg");
background-position: bottom left, bottom right, top left, top center;
}
}

@media screen and (min-width: 640px) {
body {
background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("images/overlay.png"), url("../../images/banner640.jpg");
background-position: bottom left, bottom right, top left, top center;
}
}

}

Y eso haría que la pagina se viera con la imagen banner.jpg (que es de 1600 px) a menos que la pantalla sea menor a 640 pixels de ancho (donde cambiaría al fondo de imagen de 640px, o si la pantalla es de 320 px de ancho o menos a la imagen de 320?

Agradecería ayuda sobre el asunto y desde ya gracias.