Foreground Image option

[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!

[Tom]

What exactly do you mean by foregound?

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

[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!

[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/

[Tom]

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 🙂

[Deb E]

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

[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.

[Deb E]

Actually… I seem to have made it work…

[Tom]

Awesome! 🙂

[Author]

Posts