Topic: How to change image depending on background?

[liamloveslearning]

Hey everyone,

Has anybody an idea on how econsulting have done this with there logo, if you scroll down far enough you see it changes colour depending on the background, so it goes from transparent to solid, is this JavaScript or?

Heres the culprit
http://econsultancy.com/reports/search-engine-optimization-seo-best-practice-guide

[haku]

It's actually two different images, and they are using:

Code: [Select]

background-attachment:fixed
on each of the images. The way this CSS selector works is like having an element with a fixed position, but it's only visible when the element that it's placed inside is visible in that location. So at the top of that document, the image is in the head, so its visible. Then as you scroll, the head becomes non-visible (by scrolling up) and so the image disappears, but the second image becomes visible, because the section which it is in becomes visible in that spot.

[liamloveslearning]

brilliant haku, makes perfect sense! thanks

[lAZLf]

What haku said works incredibly (I implemented it on my own site). Also if you noticed, the image is a link, I would assume they just made a link with a set height and width with its position set to absolute and placed it over the background image.

[liamloveslearning]

love the effect lAZLf, it works well!