Title Image Replacement for DNN (Shea Enhancement, revised for Z-Index issue)

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

In original Shea Enhancement, image had higher z-index than drop-down menu items. Changing z-index of entire H1 made text appear above image in some browsers. Could not change z-index of menu items.

Added an extra span tag and two classes to the mix. The new span allows the text to be pushed further back in the z-index.

Copy this code and paste it in your HTML
  1. HTML:
  2. <H1 id="overall-id" title="Text of the Title">
  3. <SPAN class="title-ir-image"></SPAN>
  4. <SPAN class="title-ir-text">Text of the Title</SPAN>
  5. </H1>
  7. #overall-id {width: 300px;
  8. height: 100px;
  9. position: relative; }
  11. #overall-id span{ background: url(http://#) no-repeat;
  12. position: absolute;
  13. width: 100%;
  14. height: 100%; }
  16. span.title-ir-image {z-index:-1;}
  18. span.title-ir-text {z-index:-999;}

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.