Advanced Search

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.

Expand | Embed | Plain Text

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>
  6.  
  7. #overall-id {width: 300px; 
  8. height: 100px; 
  9. position: relative; }
  10.  
  11. #overall-id span{ background: url(http://#) no-repeat; 
  12. position: absolute; 
  13. width: 100%; 
  14. height: 100%;  }
  15.  
  16. span.title-ir-image {z-index:-1;}
  17.  
  18. span.title-ir-text {z-index:-999;}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.