Another CSS picture replacement trick

The -9999 px Image substitution technology has been popular for one of the best parts of the decade. Replace a text element and an image, you can use the following code:

<style>
H1
{
Background:url ("MyImage") 0 0 no-repeat;
Text-indent: -9999px;
}
</style>
The background of the element is displayed and its text is moved away from the screen so that it does not interfere. Simple and effective. It is often used to display graphic titles-it is rarely necessary now that we have webfonts, but you will still feel it using the Web.

Until now.

A new technology has been found:
{
text-indent:100%;
White-space:nowrap;
Overflow:hidden;
}
The code indents the text beyond the width of its container, but it does not wrap and overflow is hidden.