Hintergrund wechsel je nach Screengrösse

hi @all

Ich versuche das Hintergrundbild je nach Screengrösse auszugeben. Leider Zickt die Mobile Version (20em) und zeigt nix an ... Desktop läuft.
Hatt mir da bitte jemand einen Tipp

.headerpix { background: url(/wp-content/uploads/2020/07/abend_14.webp) center; background-size: cover;}

@media all and (max-width: 20em) {
.headerpix { background: url(/wp-content/uploads/2020/07/abend_9.webp) }
}	

@media all and (min-width: 30em) {
  .headerpix { background: url(/wp-content/uploads/2020/07/abend_14.webp) }
}	

@media all and (min-width: 60em) {
 .headerpix { background: url(/wp-content/uploads/2020/07/abend.webp) }
}