Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

Foreground Image option

Home Forums Support Foreground Image option

  • This topic has 8 replies, 2 voices, and was last updated 6 years ago by Tom.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #43830
    Deb E

    Hi,

    I’ve been working on updating my website and a feature that would be really handy is the option of a foreground image (with transparency, obviously… or, left/right/top/bottom options…). I know it can be done with CSS, but I haven’t studied enough to do it myself as yet, and figure others might like an easy way to do it, too…

    If there is a way for you to add such a feature to the theme (maybe as an add-on?), that’d be great!

    #43871
    Tom
    Lead Developer
    Lead Developer

    What exactly do you mean by foregound?

    We have a backgrounds addon which you may find helpful: http://www.generatepress.com/downloads/generate-backgrounds/

    #43927
    Deb E

    Hi,

    Yeah, I have Backgrounds add-on. By foreground, I was meaning something that would let an image sit in front of the contentt, like on this CSS ZEN page:

    If you pop along to my website , you might see what I’m hoping to achieve… I would need to create another (PNG) image for the effect, but I’d like to have some of the background leaves hang over the sides of the content, giving the page depth.

    I can probably figure out how to add the CSS to do it myself (using the WordPress CSS feature), but I figured others might be interested, and it could even be a selling point of your theme if you added it. Up to you. Let me know, though, so I know if I need to go learn some code!

    #43928
    Deb E

    OK.. so, my link don’t seem to have worked…

    This is the CSS Zen pages I was talking about http://www.csszengarden.com/213/

    #44082
    Tom
    Lead Developer
    Lead Developer

    Hi Deb,

    Not sure how I could create an addon around this – but worth thinking about.

    I don’t actually fully agree with how CSS Zen is doing it.

    I think it’s much better to use position:absolute;.

    As an example:

    <div class="this-is-a-relative-container">
          <div class="this-is-an-absolute-container">
              <img src="..." />
          </div>
    </div>
    
    .this-is-a-relative-container {
          position:relative;
    }
    
    .this-is-an-absolute-container {
          position:absolute;
          top: -20px; /* relative to the relative container */
          right: -20px; /* relative to the relative container */
    }

    Let me know if you have any questions 🙂

    #44102
    Deb E

    Thanks for that, Tom. I’ll have a play.

    #45506
    Deb E

    Hi Tom,

    Sorry to bother you again.

    Can you tell me which part of the theme I should insert the html part of this code into? Header? Somewhere else?

    Thanks,
    Deb.

    #45528
    Deb E

    Actually… I seem to have made it work…

    #45559
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.