Problemer med skiftende header img

Hvordan laver du din media query om det er den ene eller anden? Det tyder på at den ikke rammer nogle af de tre, siden alle er display: none

*edit* jeg er blind. Jeg har fået øje på dem :-)

mangler du ikke også, at lukke din } efter en af dine breakpoints.

Derudover ville jeg nok fjerne a tags og kun have et link som er rundt om alle billederne.

Jeg kan se at #header_desktop er det eneste billede der er vist, som udgangspunkt, hvilket giver mening.
Men når du så skalerer ned til tabletstørrelse, skjuler du ganske rigtigt #header_desktop, men ændrer ikke "display" egenskaben for #header_tablet. Ergo vil den stadig være "display:none;" (og derved er alle tre billeder sat til "display:none;"). Jeg vil tro det er derfor du ikke får vist noget som helst.

Som en mindre note, vil jeg også være enig med Dan: begge dine media queries mangler en "}".

Jeg bruger denne her kode, som jeg selv har lavet.
Classerne burde beskrive sig selv

 .visible-phone {
   display: none;
 }
 .visible-tablet {
   display: none;
 }
 .visible-desktop {
   display: block;
 }
 .hidden-phone {
   display: block;
 }
 .hidden-tablet {
   display: block;
 }
 .hidden-desktop {
   display: none;
 }
 
 /* Tablet portrait */
 @media (max-width: 768px) and (min-width: 641px) {
   .visible-phone {
     display: none;
   }
   .visible-tablet {
     display: block;
   }
   .visible-desktop {
     display: none;
   }
   .hidden-phone {
     display: block;
   }
   .hidden-tablet {
     display: none;
   }
   .hidden-desktop {
     display: block;
   }
 }
 
 /* Phone landscape and down */
 @media (max-width: 640px) {
   .visible-phone {
     display: block;
   }
   .visible-tablet {
     display: none;
   }
   .visible-desktop {
     display: none;
   }
   .hidden-phone {
     display: none;
   }
   .hidden-tablet {
     display: block;
   }
   .hidden-desktop {
     display: block;
   }
 }

Jeg har taget et udsnit af koden - derfor er den sidste "}" ikke vist, men den er med.

Philip, hvad mener du med at ændre display-egenskaben? Skal jeg så skrive display:block eksempelvis? Jeg skriver jo, at når max-width er 1024 px skal header_tablet have en width på 100% og header_mobile og header_desktop skal display:none. Jeg kan ikke se, hvad jeg mere skal gøre :-)

Ja, lige præcis, display:block; skulle være vejen frem.
Jeg har rettet din CSS lidt til. Det her skulle virke. Prøv engang:

 #header_desktop {
     width: 100%;
     clear: both;
     display:block;
 }
 
 #header_tablet,
 #header_mobile {
     display:none;
 }
 
 @media only screen and (max-width: 1024px) {
     #header_tablet {
         width: 100%;
         clear: both;
         display:block;
     }
 
     #header_desktop,
     #header_mobile {
         display: none;
     }
 }
 @media only screen and (max-width: 480px) {
     #header_mobile {
         width: 100%;
         clear: both;
         display:block;
     }
 
     #header_desktop,
     #header_tablet {
         display: none;
     }
 }

Display:block var vejen frem. Det virkede! Tusind tak for hjælpen :-)