responsive themes' header for mobile?

[rcane]

I don't think this is theme-specific, but on a responsive theme can you update the header that would display for mobile devices in addition to updating the normal header.png?

[Diego Andrés]

Yes, you just change the header on a lower resolution using css

[rcane]

Yes, you just change the header on a lower resolution using css

Can you give an example?

[Diego Andrés]

Code Select Expand

div.image_banner {
background-image: url(../images/banner/full.png);
}

@media (max-width: 480px)
{
div.image_banner {
background-image: url(../images/banner/mobile.png);
}
}


[rcane]

Code Select Expand

div.image_banner {
background-image: url(../images/banner/full.png);
}

@media (max-width: 480px)
{
div.image_banner {
background-image: url(../images/banner/mobile.png);
}
}


yeah, i was off a bit. 

and that's in the ccs > index_default.css for the theme?  it's got several variants but i'm just using the default.

[Diego Andrés]

Would need to be in all of them most likely since it only loads one variant at a time.

[rcane]

Would need to be in all of them most likely since it only loads one variant at a time.

I'm not sure why it needs the "full" image since I already have that in the header section.

Can't seem to get it to work. 

[Diego Andrés]

That entirely depends on your own custom css and images.
I just provided the example

[rcane]

That entirely depends on your own custom css and images.
I just provided the example

sorry, what I meant was I didn't see the need for the top portion. 

doesn't @Media (max...) cover it?

[Diego Andrés]

Not sure what you mean, could you rephrase?

[rcane]

Not sure what you mean, could you rephrase?

sorry.
What i meant was does this need to be there since I've already got a header image?

Code Select Expand

div.image_banner {
background-image: url(../images/banner/full.png);
}


I would have thought this was all i needed.  and, being new, I don't know if background-image is what I need but a header image reference.

Code Select Expand

@media (max-width: 480px)
{
div.image_banner {
background-image: url(../images/banner/mobile.png);
}
}

[Diego Andrés]

Well given that it was an example, you are supposed to adjust it to your own needs.
The assumption comes from:

Yes, you just change the header on a lower resolution using css

It would imply that you are not using an img tag for your banner, but rather that you are already using CSS to add you banner.
Otherwise, you'll need to use CSS instead so that you can change it using CSS.

There are also alternatives, you could give this a read, using the img tag:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images