Multiple background Responsive design

Bonjour,

Dans une div, j'ai incorporé 3 images alignés horizontalement grâce à la propriété background-image.

background-image: url(images/tiramisu.jpg), url(images/nouilles.jpg), url(images/tajine.jpg);
background-position: left, center, right;

Pour un affichage sur smartphone, j'aimerai les positionner verticalement, comment faire ?

merci beaucoup

avec une media query, sans doute :

@media screen and (max-width: 768px) {
    .container {
        background-position: top, center, bottom;
     }
}

En remplaçant bien sûr 768px par la largeur maximale à laquelle appliquer cette règle et .container par le sélecteur de l’élément concerné.
Modifié par Anedja (05 Mar 2020 - 19:01)

Justement c'est ce que j'ai essayé de faire, mais ça ne fonctionne pas...

Voici le code CSS de l'élément

.list-horizontal{
	background-repeat: no-repeat;
background-image: url(images/tiramisu.jpg), url(images/nouilles.jpg), url(images/tajine.jpg);
background-position: left, center, right;
display: flex;
height: 540px;
margin-left: -30px;
justify-content: space-around;
margin-right: -10px;

et mon média query :

@media(max-width: 700px){
	.list-horizontal{
		background-position: top, center, bottom;
		background-image: url(images/tiramisu.jpg), url(images/nouilles.jpg), url(images/tajine.jpg);
	}