Skip to main content

How to hide an image inside text in an HTML page

Last week I showed you an old trick using which you can hide one image inside another image in such a way that the hidden image is revealed only when you select the image on Internet Explorer. Today I’m going to show you another trick.

Unlike the previous trick which worked only on IE, this one doesn’t work on IE at all. Take any modern web browser like Firefox, Opera and Chrome and open this page. You will see a wall of text. Now press CTRL+A to select the whole page. You should see an image. Click anywhere on the page and the image disappears.

This is a wonderful demonstration of a CSS3 declarations called ::selection.

::selection allows you to override the browser-level or system-level text highlight color with a color of your choice. This is one of those clever CSS tricks web developers can take advantage of to make their site stand out from the crowd.

Here is the code that makes this possible.

::selection {
    background: #00ff00; /* Webkit and Presto */
::-moz-selection {
    background: #00ff00; /* Gecko */

The first code works on Webkit based browsers such as Chrome and Safari and the Presto engine powered Opera. The second code works on browsers running the Gecko engine such as Firefox, Flock etc.

When this code is added to a webpage’s style sheet, the browser text highlight color is overridden by the one you specify, #00ff00 in this case.

In our hidden image example, different sections of the text was enclosed within a <span> and a different text highlight color was used. But this wasn’t done by hand - doing this manually would be a monumental task. I used a generator.


Go to this site and paste a chunk of text into the box. Don’t worry if the text you entered is of small length. It will be repeated if inadequate. Then enter the URL of the image you want to hide. Set the number of colors to 256 (128 is too less) and select a suitable text width.

Smaller sized images works better because the width of the output is limited to 220 characters. If your image has a horizontal pixel count of 220, each pixel will be replaced by one character. If the pixel count is more some information will be lost. In my example, the image was large and hence you could see pixelization.

Once you click on generate you will get a preview and also the code. Select the code and paste it on to your webpage.

Create pictures on Microsoft Excel
Hide files within other files with Plain Sight


Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used:

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.