CodePen: Background-Click

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?

Designer, artist, author, comic enthusiast, and geek about visual design/video games/Japan/human rights. Among other things!

Leave a Reply

Your email address will not be published. Required fields are marked *