Advanced Search

Anatoli Method for Image Replacement

/ Published in: CSS
Save to your folder(s)
Had to track it down through web archives.

Expand | Embed | Plain Text

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.