Grow your CSS skills. Land your dream job.

Reveal a Background Image upon Text Selection

Published by Chris Coyier

We've done some fun stuff in the past around these parts with text selection. We made a secret message generator. We made a thing to simulate selecting only a certain number of characters.

In the forums, Aaron Silber wondered about revealing an actual image with text selection. With CSS we know we can change the background color of selected text like this:

::-moz-selection { background-color: #FFA; }
::selection { background-color: #FFA; }

But the actual properties that can be used with these pseudo selectors are very limited1. Background-image is not supported in any browser that supports these text selection pseudo selectors. Aaron made a test page to see exactly what properties are supported with ::selection. Essentially, color and background-color are the only things supported.

So do we give up? Heck no! Turns out there is range object (more about that) in JavaScript which has an API for getting (and to a lesser extent setting) information about the text that is currently selected by the user. With this power, we could figure out what is selected, wrap spans around it and do our styling with those spans (which have no inherit styling limitations). Also turns out the cross browser compatibility for that is not great, but there is an open source project called Rangy for making working with range easier and more cross browser compatible.

A basic demo (from their docs) involves setting a class around selected text after clicking a button:

<script>
    var cssApplier;

    window.onload = function() {
        rangy.init();
        cssApplier = rangy.createCssClassApplier("someClass", true); // true turns on normalization
    });
</script>

<input type="button" value="Toggle someClass on selection" onclick="cssApplier.toggleSelection();">

With that in place, you'll get a CSS class ("someClass" in above code) to style however you want.

.someClass {
   background-image: url(raptor-attack.png);
}

Obviously, adding a raptor is the best possible idea.

View Demo   Download Files


1 And ::selection has been removed from the spec, so there is no standard for browsers to comply with.

Comments

  1. this was awesome but it did not respond quite well (at least in my browser, FF). The thing is that after you apply the first selection, the dinosaur remains there even when i deselect.

    Still amazing if you need to play a bit on your customers.

    • Miles Carmany
      Permalink to comment#

      Same for me, additionally using “Select All” caused the Fancy View Source to break and display the source below the demo text in the page.

      Safar 5.0.4

  2. This is an awesome idea, but not working properly for me either – Chrome on XP. Sometimes the raptor stays, sometimes it doesn’t – sometimes the remaining text disappears.

  3. I had the same problems in safari,
    so times it would stay some times it wouldn’t show.
    But still an amazing idea.

  4. I couldn’t help but laugh when I saw this in my RSS this morning. Awesome, awesome, awesome! Would be cool if you tried to copy/paste the text, you’d get the raptor image instead ;)

  5. Pretty cool, some minor bugs in Chrome – background stays visible

  6. João
    Permalink to comment#

    BIG LOL! Man you make me cry!

  7. Le Marquis
    Permalink to comment#

    Needs a little bit of tweaking, but a very cool way for an easter-egg!

  8. Fingol
    Permalink to comment#

    Most pointless thing I ever seen…

    …but Good damn so funny, Love it!!!

    keep up the good work, and thank you for all the cool web stuff.

  9. never saw something like this lolzz

    someone was feeling like Seinfeld lolzz
    nice job guys

  10. Steven
    Permalink to comment#

    Neat idea.

  11. This was fun to contribute to. With a bit of work, I think these techniques could be adapted to provide users with a better looking text selection. Is it practical? Nope. You’d need to have your javascript recognize where your selection has started, place a span tag there, and then change the closing position (constantly) wherever you’re dragging in real time (not on mouseup). On mouseup, the tags would be removed. Style the span tags with a background image of a hightlighter stoke, disable the ::Selection properties, and you’ve got yourself a digital hightlighter instead of the default blue selection background. I do it one day, but I’m too busy right now.

    • Yes that’s exactly what you’d have to do, but firing events on mousemove is pretty taxing stuff, especially when the task is dom manipulation. I’m not sure there is ever going to be a perfect solution for this, it’s mostly just for lolzz

    • and we do love the lolz!

  12. This cracks me up, a little goofy, funny is never a bad thing. Thanks for the sense of humor on this one!

  13. Permalink to comment#

    This is an awesome idea :)

    Easter eggs are always fun in websites and this is an excellent way to go about it.

  14. Very intresting idea, not sure it’ll catch on tho!

  15. I always enjoy your coding. Just wanted to toss in that when highlighting the “demo” page, suddenly half the content disappeared.

    This may be due to my browser (Chrome), but it was something I never experienced before.

    Anyways, great stuff yet again :) Keep it up.

    P.S. Digging into WordPress rocks, I’m actually going to be doing reviews of it soon :)

  16. What the.. Cool and interesting idea.. let’s see how this thing work on my images..

  17. Simply awesome. . . to describe the whole thing in one sentence is “what an !dea” Keep the good work.

  18. I do like your sense of humor. Funny how human nature instinctively wants to highlight the text. Worked fine on my browser and I can’t wait to give this a try for myself. :)

  19. ooo.. Awesome stuff…! I also didn’t know about the Secret Message generator thingy.. thats pretty cool too! :)

  20. <style>
    .someClass { background: yellow }
    </style>

    Now enjoy text you can highlight to mark important fragments.

  21. Permalink to comment#

    what a creativity …… \m/ ….
    really awesome thought …

  22. I do like your sense of humor. Funny how human nature instinctively wants to highlight the text.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".