Solution: There are five major categories for image replacement i.e. CSS ON/Images ON, CSS ON/Images OFF, CSS OFF/Images ON, CSS OFF/Images ON, CSS OFF/Images OFF, Extra Unnecessary Markup. CSS ON/Images ON represents browsers in their normal states and all the techniques should pass their test.

Solution: CSS OFF/Images ON represents browsing with no stylesheets being applied. Most of the techniques default to regular web text here which is not exactly a fail, but since images may still be turned on.

Solution: CSS ON/Images On technique is also known as FIR or “Fahrner Image Replacement”. The premise here is to use a span to wrap the text inside the header and use that span to hide the text. It works but we have to use display:none.

Solution: Using negative text-indent is also known as the Phark method. This is the most common technique that most web developers have used. The main idea is to move the text far outside the browser window by setting a large negative text-indent.

Solution: Using margin is also used as Radu Darvas technique. This technique also forces the text outside of the browser window but uses margins to do so. The main idea is to apply very large negative left margin and give our header a correspondingly large width.

Solution: Using padding is known as Langridge method. We push the text outside of our header using padding-top property. The property is to be set to a value that is equal to the height of the logo. But this alone is not sufficient, we have to use overflow: hidden to hide the text.

Solution: Using small font-size is known as Lindsay method. Another way to hide text is by making it very small and set its color to the background of the image. This works without affecting accessibility but we can also face SEO penalties because of tiny font size and camouflaged color.

Solution: In this method, overflow property is used to hide the element completely. Using this technique requires to wrap the text in a  element just like the other methods. The text is hidden by overflow: hidden property.

Solution: This method also requires an additional  element to work. But the  element is not wrapped around the text but used to position our image.

Solution: This method also requires a bogus image in addition to a usual  element to work properly. The image is a 1×1 pixel transparent GIF. The main purpose is to show users the alt text if images are turned off.