Have you ever wanted to set the source of a clicked link — like an image — as the background of a webpage?
Last week, I made a simple CodePen demoing that exact thing. You can also view it in action on the front page of this website: if you click directly on any of the pictures in the thumbnail section, the background will be set to its link source, in this case a full version of that image. The background will also parallax a little as you scroll! The same thing happens with galleries in posts such as this one.
The demo breaks it down in the code, but what happens is that, when a certain class of link is clicked, the source of that link will be set as the background, which will also then be styled differently than default. I hadn’t seen anything like this done before, so I went ahead and tried it.
There are a couple issues with this still, like the useful Background-Size Polyfill seeming not to work (although it did before; I’m trying to find out what changed) to create the full-width background appearance in IE8, but it’s a work in progress. Perhaps someone out there has ideas to add? (Maybe a better name?)
I envision this being used on very simple, image-based portfolio sites. A big thank you to Julie Dillon for letting me use her art to demo it! It suits this kind of thing quite well, doesn’t it?
