transparent section-wrap

[Victoria Alt]

Hi Organized Themes,

On a static front page, I have a “section one image”.

As the content of “home section one”, I’d like to float another (partially transparent) image on top of the “section one image”.

I’ve found several ways to do this: either by using html in the “text” widget to display the second image or doing so in a page referenced by a “home block – page content” widget.

This works — the image appears in the right place. But I can’t get rid of the background color around this image that obscures the “section one image.”

Can you help me make the background color of section one transparent? Neither of these modifications in the custom css box have worked:

#one {
background-color: transparent;
}

#one .section-wrap {
background-color: transparent;
}

Thanks so much for your help!

[Bill Robbins]

Hello Victoria,

That is an excellent question. It’s an odd quirk of CSS, but the section one content doesn’t actually go on top of the section one image. The background of the section content is already transparent. It’s displaying the body background color/image which is behind both the section image and section content. To our eyes it doesn’t look like that’s the case, but from the browser’s perspective, that’s how it works.

But we can still achieve the effect you’re going for though. I recently helped a user create a similar effect in this thread: https://support.organizedthemes.com/forums/topic/transparency-of-home-page-sections/

You’ll need the URL to the image you’re using. You can find that in the theme options page; it’ll have the URL to the home block images listed there. You can also find them in the WordPress media library. When you edit an image, its URL will be available there too.

If you have any questions implementing that, just let me know.

Thanks,
Bill

[Author]

Posts