CSS - Verschiedene header-Bilder für fluid grid Layouts website

BEARBEITEN : Lesen Sie weiter, dann die nächsten 5 Zeilen! Mein problem ist nicht die Logik der unterschiedlichen css-Code für mobile, tablet und desktop (@media Abfrage) - das problem ist die änderung der IMAGE.SRC Attribut AUS dem INNEREN CSS.

Ich versuche, um eine neue flüssige website und ich bin versucht zu erstellen, die 3 verschiedene header-Bilder:

1. Mobile header-Bild (low res)
2. Tablet header-Bild (medium res)
3. Desktop-header-Bild (high res)

(alle Bilder variieren auch im Seitenverhältnis)

Wie bekomme ich diese zu arbeiten?

Aktuell ich habe versucht, ändern Sie einfach die SRC im CSS für die einzelnen CSS-BEREICH (mobile, tablet, desktop)

Wie diese:

#img_header {
   src: url(img/header_m.png);
}

Wir alle wissen, dass dies nicht funktioniert 😀 ich möchte auch nicht zu verwenden background-image statt.

Was ist der richtige Weg, dies zu tun?

Sollte ich die hacken in den generierten javascript-code in Adobe Dreamweaver CS6, und ändern Sie die .src von dort ?

Ich bin sicher, dass es eine css-Möglichkeit, so sagen Sie mir, Jungs. Dank

UPDATE: ich habe gesagt, dass ich bereits verwenden, media queries...

Hier ist mein css:

/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 97.826%;
    padding-left: 1.0869%;
    padding-right: 1.0869%;
}

#div_header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#img_header {
    src: url(img/header_m.png);
}

/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) {
    .gridContainer {
        width: 93.451%;
        padding-left: 0.7744%;
        padding-right: 0.7744%;
    }

    #div_header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #img_header {
        src: url(img/header_t.png);
    }
}

/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) {
    .gridContainer {
        width: 89.1614%;
        max-width: 1232px;
        padding-left: 0.4192%;
        padding-right: 0.4192%;
        margin: auto;
    }

    #div_header {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #img_header {
        src: url(img/header.png);
    }
}

NUN, Sie haben alles gelesen, Sie sollten sich vorstellen, dass ich nicht ändern kann die img.src von innen, css..., ich denke, die einzige Möglichkeit, dies zu tun ist, um das eindringen in die unformatierte automatisch generierte javascript von adobe DW cs6 ist es nicht ?