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

[z3r0]

Tengo una página cuyo css tiene esto:

#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;
}

La que importa es "banner.jpg" que es la imagen grande de fondo (las otras son unas rayitas que se superponen.

El asunto es que esa imagen tiene 1600x815 px y pesa 191kb. Para verla en una pc desktop no está mal. Pero me preocupa el tamaño y peso para una tablet o un celular.

Hice versiones de distinto peso de la misma imagen banner.jpg a saber:

1) banner.jpg (1600x815)
2) banner1200.jpg (1200x611)
3) banner640.jpg (640x326)
4) banner320.jpg (320x163)
5) bannerhd.jpg (1600x815 pero esta con mejor calidad que la original)

En la página .html el código tiene un tag
<section id="banner"></section> que entiendo es lo que invoca a esa parte del código css.

La pregunta es: como hago para poder "servir" banner640.jpg, o banner320.jpg etc según la página sea visualizada desde un celular, una tablet, etc.

[petit89]

revisa esta documentación:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[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.