Support » Plugin: Meteor Slides » Overlaying transparent PNG over Meteor Slideshow?

  • Resolved dcjensen


    Just getting into WordPress and am a PHP novice. I have a Meteor Slideshow banner working in the header. It looks and works great.

    Now I need to overlay a transparent PNG (a composite of logos) over top of the banner slideshow. I know it can be done, but need help getting there.


Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Josh Leuze


    Hi David, the trick here is that you need to position the graphic absolutely so that you can layer it over the slideshow.

    So you might have some code in your header that looks like this:

    <div id="slideshow-wrapper">
    	<img id="slideshow-logo" src="logo.png" alt="Acme Co." />
    	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
    </div><!-- #slideshow-wrapper -->

    And you might have some CSS that looks like this:

    #slideshow-wrapper {
    	position: relative;
    #slideshow-logo {
    	position: absolute;
    	top: 0px;
    	left: 0px;

    You need to have a div wrapped around the slideshow and logo because when you position the logo absolutely with the CSS above, it will be placed in the top left corner of the page unless it is contained by something that is positioned relatively.

    Here is a good blog post explaining how this positioning works.

    Josh, thanks for going above and beyond to help with an issue that really wasn’t a problem with Meteor Slideshow.

    I spent hours of frustration trying to implement the above code due to a missing closing quotation mark (as shown, missing after the semi-colon: <div style=”clear:both;></div>). This particular line is just ahead of the above code provided by Josh and is necessary to correctly place the slideshow. That $*#& absent quotation mark wrecked havoc on any attempt to correctly place my transparent logo.

    Happy to report that after fixing the missing quotation and adding a z-index of 60 (Meteor is set to 50) to the #slideshow-logo CSS above, all works as desired.

    And thus the angle of my learning curve incrementally improves.

    Plugin Author Josh Leuze


    No problem David, glad to help, and glad to hear you got it working!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Overlaying transparent PNG over Meteor Slideshow?’ is closed to new replies.