Frontendplace Blog

Sharing Frontend developing ideas

Print Logo without having img tag in content

Posted by info on May 29th, 2010

Ever wanted to have your logo to be printed when background printing is disabled and for accessibility reasons you don’t want to add the image tag in your markup and control the image source in your stylesheet.
I heard this week that you can still print images inside an html document without having an image tag in the content.

The magic trick: When you want the logo to be clickable you can set the anchor to be displayed as list-item and set the list-style-image. This image will be printed even when the background printing is disabled and you have a clean accessible markup.. Be aware that not all the style sheet rules can be used for the text inside the anchor, like negative text-indent, vertical-align and overflow:hidden (FF mac doesn’t show the tag);

See this example