Anatoli Method for Image Replacement


/ Published in: CSS
Save to your folder(s)

Had to track it down through web archives.


Copy this code and paste it in your HTML
  1. h1 {
  2. width: 247px;
  3. height: 27px;
  4. line-height: 1em;
  5. white-space: nowrap;
  6. font-size: 100%;
  7. overflow: hidden;
  8. }
  9.  
  10. h1:after {
  11. display: block;
  12. content: url("logo.png");
  13. width: 247px;
  14. height: 27px;
  15. margin-top: -1em;
  16. }
  17.  
  18. /*IE hacking */
  19. * html h1 {
  20. background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML += '<span></span>');
  21. position: relative;
  22. z-index: 1;
  23. }
  24.  
  25. /*Now the simple and effective IE styling.*/
  26.  
  27. * html h1 span {
  28. display: block;
  29. width: 247px;
  30. height: 27px;
  31. background: url(logo.png) no-repeat;
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. z-index: 2;
  36. }

URL: http://web.archive.org/web/20051213222507/http://fecklessmind.com/main/5/definitive-solution-to-image-replacement

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.