How To: keep a logo or text over the header image when using fade in/out

juggledad · #1 Aug 6, 2012, 09:03 AM

Due to the way the fade in/out jscript code works, the 'Overlay Header Image' information will disappear almost immediately. But here is a trick to keep a logo, text or other image over the header image. The way it is done is give the 'wrapper' a 'position: relative;' then use add a div with your code into the 'Configure HEADER AREA' option and then position it.

For example
1) at ato->Style & edit HEADER AREA->Configure Header Area add the following just before the %image

HTML Code:

<div class="my_codeoverlay"><img src="http://yourdomain.com/wp-content/yourimage.jpg"  /></div>

or

HTML Code:

<div class="my_codeoverlay">This is teh text to show up</div>

then add the following to the CSS Inserts

HTML Code:

#wrapper {position: relative;}
div.my_codeoverlay  {
    left: 130px;
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 99;
}

you will want to play with the actual values to use