{"id":630,"date":"2008-03-24T05:45:20","date_gmt":"2008-03-24T12:45:20","guid":{"rendered":"http:\/\/css-tricks.com\/nine-techniques-for-css-image-replacement\/"},"modified":"2012-11-24T09:38:16","modified_gmt":"2012-11-24T16:38:16","slug":"css-image-replacement","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-image-replacement\/","title":{"rendered":"Nine Techniques for CSS Image Replacement"},"content":{"rendered":"<p><strong>CSS image replacement<\/strong> is a technique of replacing a <strong>text element<\/strong> (usually a header tag) with an <strong>image<\/strong>. An example of this would be including a logo on a page. You may want to use a <code>&lt;h1&gt;<\/code> tag and text for this for the accessibility and SEO benefits, but ideally you&#8217;d like to show your logo, not text.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/css-image-replacement.jpg\" alt=\"\" title=\"css-image-replacement\" data-recalc-dims=\"1\"><\/p>\n<div class=\"explanation\">Update (March 14, 2012). I&#8217;ve created a new page that now covers more image replacement techniques, including the more recent <a href=\"http:\/\/www.zeldman.com\/2012\/03\/01\/replacing-the-9999px-hack-new-image-replacement\/\" rel=\"noopener\">Scott Kellum Method<\/a> and the HTML5BP Method. I&#8217;m calling it the <a href=\"https:\/\/css-tricks.com\/examples\/ImageReplacement\/\">CSS Image Replacement Museum<\/a>.<\/div>\n<p>Note that some of these techniques are <em>very old<\/em>. Web design in the early 2000&#8217;s was a lot different than it is now, but there was still much thought being put into accessibility. Because of that, most of these techniques still hold up today. It is still very interesting to see all the thought and problem solving that was put into this. Also note that I tested all these FF2, Opera 9, Safari 3, and IE 6 and they all behaved identically (hard to believe, I know).<\/p>\n<p>The report card consists of five major categories:<\/p>\n<ul>\n<li>CSS <strong>ON<\/strong> \/ Images <strong>ON<\/strong><br \/>Represents browsers in their normal states. All techniques should pass this test, since that&#8217;s the whole point.<\/li>\n<li>CSS <strong>ON<\/strong> \/ Images <strong>OFF<\/strong><br \/>Represents browsing with regular stylesheets applied but images turned off. This is rare but a possibility (folks with bandwidth concerns&#8230;) This is the most difficult test. Since most of these techniques go to various lengths to hide text, when the images are turned off that means that nothing is displayed which ain&#8217;t good. Displaying text only here is considered a pass.<\/li>\n<li>CSS <strong>OFF<\/strong> \/ Images <strong>ON<\/strong><br \/>Represents browsing with no stylesheets being applied. Most techniques default to regular web text here which isn&#8217;t exactly a fail, but since images may still be turned on, I don&#8217;t consider it a pass either.<\/li>\n<li>CSS <strong>OFF<\/strong> \/ Images <strong>OFF<\/strong><br \/>Represents browsing with both images turned off and no stylesheets applied. Defaulting to text here is considered a pass.<\/li>\n<li><strong>Extra Unnecessary Markup<\/strong><br \/>Having to add markup for the sole purpose of image replacement is not ideal. Does not achieve true separation from content and design.<\/li>\n<\/ul>\n<h3>Technique #1<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 id=\"technique-one\"&gt;\r\n  &lt;span&gt;CSS-Tricks&lt;\/span&gt;\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1#technique-one {\r\n  width: 250px;\r\n  height: 25px;\r\n  background-image: url(logo.gif);\r\n}\r\nh1#technique-one span {\r\n  display: none;\r\n}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-1.png' alt='report-card-1.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> This technique is referred to as FIR or &#8220;<a href=\"http:\/\/www.stopdesign.com\/articles\/replace_text\/\" rel=\"noopener\">Fahrner Image Replacement<\/a>&#8220;. Much has been written about this including an <a href=\"http:\/\/www.alistapart.com\/articles\/fir\/\" rel=\"noopener\">A List Apart article<\/a> about it&#8217;s problems with accessibility as well as an article from David Shea <a href=\"http:\/\/www.digital-web.com\/articles\/in_defense_of_fahrner_image_replacement\/\" rel=\"noopener\">defending it<\/a>. 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 using display: none will hide the text from screen readers (and presumably search bots, not good).<\/p>\n<h3>Technique #2<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-two\"&gt;\r\n  CSS-Tricks\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-two {\r\n  width: 2350px; height: 75px;\r\n  background: url(\"images\/header-image.jpg\") top right;\r\n  margin: 0 0 0 -2000px;\r\n}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-2.png' alt='report-card-2.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> Radu Darvas is credited with this technique. Basically this technique creates a giant box that goes way off the screen to the left. The text, being left-justified, cannot be seen. The image is placed in the top left of this box. It works, but it has the common problem of failing with CSS ON \/ Images OFF. I can also see this giant box thing being a problem in more complex layouts, besides being just generally less efficient than some other techniques.<\/p>\n<h3>Technique #3<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-three\"&gt;\r\n  CSS-Tricks\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-three {\r\n  width: 350px; \r\n  height: 75px;\r\n  background: url(\"images\/header-image.jpg\");\r\n  text-indent: -9999px;\r\n}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-3.png' alt='report-card-3.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> This technique is credited to Mike Rundle and referred to as the Phark Method. This is probably the most widely used technique today. At the time of this writing, it is certainly the one I use most often. There is even a <a href=\"https:\/\/css-tricks.com\/9-awesome-css-themed-t-shirts\/\">T-Shirt<\/a> based on this one (2nd up from the bottom. The premise is deliciously simple: replace block with background image, kick text off page with indent. It&#8217;s effective and keeps screen readers happy. It only fails the elusive CSS ON \/ Images OFF issue. A variation on this technique is to use <a href=\"http:\/\/www.stuffandnonsense.co.uk\/archives\/examples\/malarkey-method-example.html\" rel=\"noopener\">negative letter spacing instead<\/a>, which purports to resolve problems with triggering huge unwanted scrollbars in some browsers.<\/p>\n<h3>Technique #4<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-four\"&gt;\r\n  &lt;a href=\"#\"&gt;\r\n    &lt;img src=\"images\/header-image.jpg\" alt=\"CSS-Tricks\" \/&gt;\r\n  &lt;\/a&gt;\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-four {\r\n\twidth: 350px; height: 75px;\r\n\tbackground: url(\"images\/header-image.jpg\");\r\n\ttext-indent: -9999px;\r\n}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-4.png' alt='report-card-4.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> I&#8217;m not sure the origin of this technique, but it&#8217;s basically an extension of the Phark technique. Instead of bumping text off the screen you are bumping an image off the screen. <strong>This has the distinct advantage of still showing an image when CSS is OFF and images are ON<\/strong>, and also has ALT text for <a href=\"http:\/\/www.webaim.org\/standards\/508\/checklist\" rel=\"noopener\">508 compliance<\/a>. This technique still fails with CSS ON \/ Images OFF. I give credit to Volkan G\u00c3\u00b6rg\u00c3\u00bcl\u00c3\u00bc for pointing out this is the technique that <a href=\"http:\/\/www.smashingmagazine.com\/\" rel=\"noopener\">Smashing Magazine<\/a> is using in their header. One concern over this technique is whether or not it is effective SEO, specifically, if ALT text is just as good as regular web text. An extension of this technique would be to include regular web text inside the anchor link as well. Both the text and the image would get bumped off the page with the text-indent and it would aliveate the SEO concerns, but then you&#8217;d get &#8220;double text&#8221; with both images OFF and CSS OFF.<\/p>\n<h3>Technique #5<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-five\"&gt;\r\n  &lt;img src=\"images\/blank.gif\" alt=\"CSS-Tricks\" \/&gt;\r\n  &lt;span&gt;CSS-Tricks&lt;\/span&gt;\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-five {\r\n\twidth: 350px; height: 75px;\r\n\tbackground: url(\"images\/header-image.jpg\");\r\n\t}\r\n\th1.technique-five span {\r\n\t\tdisplay: none;\r\n\t}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-51.png' alt='report-card-51.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> Radu Darvas is also credited with this technique. By including a single-pixel transparent GIF image to the markup, you can restore ALT text with images turned off. This allows text to be displayed with CSS ON \/ Images OFF (!). Very effective, but adding the shim GIF is quite the blow to semantics. Also, with both CSS and Images OFF you get &#8220;double text&#8221;, meaning both the alt text and the regular header text.<\/p>\n<h3>Technique #6<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-six\"&gt;\r\n  CSS-Tricks\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-six {\r\n\twidth: 350px;\r\n\tpadding: 75px 0 0 0;\r\n\theight: 0;\r\n\tbackground: url(\"images\/header-image.jpg\") no-repeat;\r\n\toverflow: hidden;\r\n}<\/code><\/pre>\n<p><strong>More information:<\/strong> This technique is credited to simultaneous discovery by <a href=\"http:\/\/moronicbajebus.com\/wordpress\/wp-content\/cssplay\/image-replacement\/\" rel=\"noopener\">Seamus Leahy<\/a> and <a href=\"http:\/\/www.kryogenix.org\/code\/browser\/lir\/\" rel=\"noopener\">Stuart Langridge<\/a>. This technique creates a box which will render with a height generated solely by top padding. By setting overflow to hidden, text will automatically be hidden but the box will be properly sized for a background image. This is accessibility-friendly and fairly effective, but fails in the CSS OFF \/ Images ON test as well as requires a box model hack for older versions of IE.<\/p>\n<h3>Technique #7<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-seven\"&gt;\r\n\t&lt;span&gt;CSS-Tricks&lt;\/span&gt;\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-seven {\r\n\twidth: 350px; height: 75px;\r\n\tbackground: url(\"images\/header-image.jpg\") no-repeat;\r\n\t}\r\n\th1.technique-seven span {\r\n\t\tdisplay: block;\r\n\t\twidth: 0;\r\n\t\theight: 0;\r\n\t\toverflow: hidden;\r\n\t}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-7.png' alt='report-card-7.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> Credited to Leon Dwyer. This technique is able to hide the text by putting it inside a box 0px wide and 0px tall with hidden overflow. Because it doesn&#8217;t use the display attribute to hide the text, it&#8217;s safe for screen readers. <\/p>\n<h3>Technique #8<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-eight\"&gt;\r\n  &lt;span&gt;&lt;\/span&gt;CSS-Tricks\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-eight {\r\n\twidth: 350px; height: 75px;\r\n\tposition: relative;\r\n\t}\r\n\th1.technique-eight span {\r\n\t\tbackground: url(\"images\/header-image.jpg\");\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-8.png' alt='report-card-8.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> This technique is credited to <a href=\"http:\/\/levinalex.net\/files\/20030809\/alternatefir.html\" rel=\"noopener\">Levin Alexander<\/a>. In this technique, instead of pushing the text off the page or otherwise hiding it, the background image just <strong>sits on top<\/strong> of the text. This is the only other technique besides #5 which passes the CSS ON \/ Images OFF test. One problem with this technique is that if your background image uses transparency, the text will show through. Also, while not included in the original writeup of this technique, I would suggest hiding the overflow so that if the text size is bumped up large enough that it breaks out of the box it won&#8217;t show.<\/p>\n<h3>Technique #9<\/h3>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;h1 class=\"technique-nine\"&gt;\r\n  CSS-Tricks\r\n&lt;\/h1&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">h1.technique-nine {\r\n  width: 350px; height: 75px;\r\n  background: url(\"images\/header-image.jpg\") no-repeat;\r\n  font-size: 1px;\r\n  color: white;\r\n}<\/code><\/pre>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/report-card-9.png' alt='report-card-9.png' data-recalc-dims=\"1\"><\/p>\n<p><strong>More information:<\/strong> This technique is credited to <a href=\"http:\/\/maxdesign.com.au\/presentation\/headings-as-images\/#option4\" rel=\"noopener\">Russ Weakley<\/a>. With this technique, simply setting the text to an ultra-tiny 1px size and matching it&#8217;s color to the background color of the image, you don&#8217;t even need to hide it. While this technique makes a lot of sense accessibility wise, it has it&#8217;s own problems. Like most of the others, it doesn&#8217;t work with CSS ON \/ Images OFF. Even at the 1px size, the text is still visible, so this will only work on flat color backgrounds where it can blend in perfectly. I also have my suspicions that there may be some SEO penalties for this, both for the very small font-size and for matching background-color and color.<\/p>\n<h3>Even more information&#8230;<\/h3>\n<ul>\n<li>As usual, there is also a <a href=\"http:\/\/particletree.com\/features\/css-rules-for-image-replacement\/\" rel=\"noopener\">javascript solution<\/a>.<\/li>\n<li>There is a technique for doing this with <a href=\"http:\/\/www.evotech.net\/blog\/2007\/09\/css-image-replacement-method\/\" rel=\"noopener\">inline-blocks instead of blocks<\/a>.<\/li>\n<li>If the only reason you are using this is to <em>change the font<\/em>, you&#8217;d be better off using @font-face.<\/li>\n<li>Google Webmaster Tools <a href=\"http:\/\/www.google.com\/support\/webmasters\/bin\/answer.py?answer=66353\" rel=\"noopener\">has an article<\/a> about this which doesn&#8217;t specifically cover image replacement but reading between the lines, it seems like a reasonable amount of usage of this technique will have no negatives.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a &lt;h1&gt; tag and text for this for the accessibility and SEO benefits, but ideally you&#8217;d like to show your [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":206019,"url":"https:\/\/css-tricks.com\/the-image-replacement-museum\/","url_meta":{"origin":630,"position":0},"title":"The Image Replacement Museum","date":"November 3, 2015","format":false,"excerpt":"CSS image replacement is a technique of replacing a text element (usually a header tag like an ) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":608,"url":"https:\/\/css-tricks.com\/rethinking-css-image-replacement\/","url_meta":{"origin":630,"position":1},"title":"Rethinking CSS Image Replacement","date":"March 13, 2008","format":false,"excerpt":"When I say CSS image replacement, I mean taking a page element that isn't normally an image and turning it into an image. This is a very common trick and popular because of it's semantic meaningfulness and SEO benefits. A common place to use this is with a header tag.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304025,"url":"https:\/\/css-tricks.com\/4-ways-to-animate-the-color-of-a-text-link-on-hover\/","url_meta":{"origin":630,"position":2},"title":"4 Ways to Animate the Color of a Text Link on Hover","date":"March 3, 2020","format":false,"excerpt":"Let\u2019s create a pure CSS effect that changes the color of a text link on hover\u2026 but slide that new color in instead of simply swapping colors. There are four different techniques we can use to do this. Let\u2019s look at those while being mindful of important things, like accessibility,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":199370,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/","url_meta":{"origin":630,"position":3},"title":"A Complete Guide to SVG Fallbacks","date":"May 4, 2015","format":false,"excerpt":"If you're using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1234,"url":"https:\/\/css-tricks.com\/question-answer-wrap-up-quickies\/","url_meta":{"origin":630,"position":4},"title":"Question &#038; Answer Wrap-Up: Quickies","date":"October 24, 2008","format":false,"excerpt":"Mackinley Drummond What's the deal with the \"cardboard cutout\" CSS-Tricks look? Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what a CSS-based site had to look like. I have begun\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":316116,"url":"https:\/\/css-tricks.com\/how-to-italicize-text\/","url_meta":{"origin":630,"position":5},"title":"How to Italicize Text","date":"July 17, 2020","format":false,"excerpt":"HTML and CSS offer us the ability to italicize text. I\u2019m talking about text like this. Let\u2019s cover everything you\u2019ll need to know. What is italic text and why would you italicize text? You italicize text most often to call attention to it. Literally to emphasize a word, so that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/italic.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/630"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":13634,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/630\/revisions\/13634"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}