Two logos according to different header size.

Hi,

I'm building a layout with a header in two different size. So, when you load the page you see the header in full size. When you scroll down the header is smaller.

Right now I have a svg image as logo but I want to use two different images on the header. One for big header and the other for small header.

Do you know how can I do that in CSS?

Thanks,

 

It would help if you posted a link so we can see what we are dealing with.

 

COBOLdinosaur has it right, no code, and it becomes "this is why we can't help you" -- though it SOUNDS like you are playing goofy scripting tricks with some sort of fixed header, which is garbage accessibility and another of those "gee ain't it neat" bits of garbage that has no business on a website.

 

Are you wanting to large image to "shrink" when you scroll down?

 

Agree with DS. The sites with shrinking logos really tick me off. That stuff is going away anyway, so you'd better of not even bother looking for it.

 

ACTUALLY, I wouldn't go that far -- it can serve a purpose for things like responsive layout; swapping the image when the WIDTH is too big makes sense...

I just take issue with it on something like scrolling.

 

Right. I was talking about something similar to this: http://themenectar.com/demo/salient/

There is an example of a shrinking header on jsfiddle I just saw. But I am sure it can be done without jquery: http://jsfiddle.net/jezzipin/JJ8Jc/