<p>Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and CSS! </p> <p>This effect is created by rendering two containers with fixed elements. The first container has a white background with knockout text. The second container has a background image with white text. Then, using some fancy clipping tricks, we hide the first container’s text when the user scrolls beyond its boundaries and vice-versa. This creates the illusion that the text background is changing. </p> <p>Before we begin, please note that this won’t work on older versions of Internet Explorer. Also, fixed background images can be cumbersome on mobile WebKit browsers. Be sure to think about fallback behavior for these circumstances. </p> <p>Setting up the HTML </p> <p>Let’s start by creating our general HTML structure. Inside an outer wrapper, we create two identical containers, each with an element that is wrapped in a .title_wrapper.</p>