Posted by Joe Oldak on

This is an interesting idea, and nesting background image includelets is not something I've tried, though it should work fine.

You can't set a transparent background colour with the popup, it's just not something I had considered (being the background, I figured transparent wouldn't really make sense!). However we can easily work around this with a bit of custom CSS magic.

First off, on the inner Background Begin, in the includelet settings set the CSS Class to something so we can create a custom style for it. For example transparent-bg

You can then add your transparent colour to the colour block using this named class by adding some custom css to the Raw Header HTML in the theme settings, e.g., like this:

<style>
.background-image-wrapper.transparent-bg {
  background-color: #ffff0080 !important;
}
</style>

Substitute 'transparent-bg' for whatever css class you added. You should only need to set '!important' if you have configured a colour in the includelet settings, so that it overrides it.

I tried this out on a test site and it seemed to work!

Thanks

Joe

Posted by Men in Sheds Winslow on

Thanks... I need to understand CSS now. 

Posted by Winslow Lions on

Excellent. Now I need to understand how to 'nest' a block of text inside the Background Image - basically the text would be a smaller box on top of the background image (and not covering the whole Background Image). Is this possible?

 

 

Posted by Joe Oldak on

Whatever includelets you place between the Background Begin and Background End will appear on top of the image/colour that you set up.

So what I would do is use the Custom Content includelet to create the text that you want to overlay on the background. You can choose to put this in a panel, or show it inline if you don't want the standard box around it.

You can then play around with the margin/padding settings on the includelet to add space above and below the text.

If you want ultimate control you could use the Raw HTML includelet instead of Custom Content - though then you're on your own with the appropriate HTML etc!

This is how we did the text over the main image on here: https://superhighways.org.uk

Thanks

Joe