Problemer med skiftende header img

Mon, 20 Jan 2014 09:18:23 GMT

Jeg vil gerne have tre forskellige header-billeder afh�ngig af mine breakpoints i css'en. Jeg har indsat tre forskellige img i HTML og givet dem hver deres id. Jeg har stylet med display: none, alt efter hvilket header img, der skal vises. MEN, det er kun det f�rste billede, der bliver vist. N�r man skalerer fra desktop til tabletst�rrelse, bliver ingen billeder vist. Jeg forst�r virkelig ikke hvorfor. H�ber I kan hj�lpe :-)

HTML kode

 <header>
         <a href="index.php"><img src="images/headerendelig_desktop.png" alt="header logo" id="header_desktop"/></a>
         <a href="index.php"><img src="images/headerendelig_tablet.png" alt="header logo" id="header_tablet"/></a>
         <a href="index.php"><img src="images/headerendelig_mobile.png" alt="header logo" id="header_mobile"/></a>
     </header>

CSS kode

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

Udvikleren.dk - Seneste [media-queries] forum tr�de

Problemer med skiftende header img