WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Text Overlay on Slides - setting transparent background for text (3 posts)

  1. photoMaldives
    Member
    Posted 1 year ago #

    Hi Josh

    I'm loving your plugin - deceptively simple, but performs very well with minimal overhead. And of course from what I've seen here and on your site, your level of support is second-to-none ! :)

    Hoping you can help - I've been struggling for over 2hrs now with this one small detail.

    I've created the custom stylesheet as per your guidelines, and the text is overlaid nicely on the slides now. But I can't get the CSS to work for the transparent background behind the text - the background doesn't show up at all. Or rather, I get a thin full-width strip showing on only Chrome/IOS, but Win7 chrome/ie/ff don't show it. (Ideally, the background should be limited to just the width of the text, but at this stage I'll be happy with a full width strip !)

    I'm thinking it might be something to do with the Z-INDEX ?

    My CSS at the moment -

    .meteor-slides p {
        background: url("wp-content/themes/responsive-full-content/images/black-background.png") repeat scroll 0 0 transparent;
        bottom: 25px;
        color: #DDDDDD;
        font-size: 2em;
        left: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        text-align: center;
        width: 100%;
        z-index: 999;
    }

    (Firebug tells me that the path to the PNG is correct, although is shows on popup as 128x128px for some reason, despite me making a 425x32px PNG).

    I'm guessing it's something v.obvious !
    Thanks. :)

    http://wordpress.org/extend/plugins/meteor-slides/

  2. photoMaldives
    Member
    Posted 1 year ago #

    UPDATE

    I asked a colleague about this, who was a little puzzled that for some reason the CSS wasn't 'behaving' as it should (probably my theme = 'Responsive').

    So for anyone else that might encounter this or similar, this is all I needed - replace the padding/bottom/background from above with -

    padding: 25px 0 25px 0;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.8);
  3. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, good to hear that you got it figured out!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.