CSS - Different header images for fluid grid layout website

Question

EDIT : read further then the next 5 lines! My problem is not the logic of doing different css for mobile, tablet and desktop (@media query) - the problem is to change the IMAGE.SRC attribute FROM INSIDE CSS.

I'm trying to make a new fluid website and I'm trying to create 3 different header images:

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

(all the images also vary in aspect ratio)

How do I get this to work?

Currently I've tried to simply change the SRC in CSS for each CSS SECTION (mobile, tablet, desktop)

Like this:

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

We all know that this doesn't work :D also I don't want to use background-image instead.

What is the proper way to do this?

Should I hack into the generated javascript code from Adobe Dreamweaver CS6 and change the .src from there ?

I'm sure there is a css way, so tell me guys. Thanks

UPDATE: I should have said that I already use media queries...

Here is my 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);
    }
}

NOW that you have read everything, you should imagine that I can't change the img.src from inside css..., I think the only way to do so is to hack into the unformatted auto generated javascript from adobe DW cs6, isn't it ?

Answer 1

i've now set another div inside the div_header, and give that child div a background image and a hardcoded width and height ( matches the individual images ), so i've faked a tag that now have ability to define (backgound-) image source via css instead of defining attribute of image source ;)

thanks anyway for your answers

Answer 2

You can use CSS3 media queries for your desired results.....

And I think you should read this article it will help you :-

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Answer 3

You can do different images by using media queries

Mobile

@media only screen and (min-width : 320px) and (max-width : 480px) {
 Your image for mobile
}

Tablet

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){

Your image for tablet
}

Answer 4

If you are using single image in diff resolution then you need not to do take 3 images. Take the bigger image (for desktop size) and write the below css

<header><img src="img/header_m.png" /></header>

CSS

header img{max-width:100%}

I believe you are aware of media queries http://css-tricks.com/css-media-queries/

To change foreground image

If you want to change foreground images for different devices then try z-index

.header{
    background-color:red;
    position:relative;  height:auto}

img:first-child{
    position:absolute; top:0; left:0;
    z-index:-1; width:200px
}
img{
    position:absolute; top:0; left:0;
    z-index:10; width:200px
} 

Change the z-index value for respective device width.

Demo here http://jsfiddle.net/5vpG7/70/

Answer 5

......................

Now used to media query css

    @media screen and (min-width: 500px) and (max-width: 800px) { 
// your css code here 

 }

more info about this