Background Alpha
overview
A real image with an overlay that behaves as a background image.
Overview
Using a real image that behaves as a background image has multiple benefits over using an actual background image:
Not everyone knows how to do this technique properly, though, especially if you want a color or gradient overlay as well.
But, even if you do know how to pull this off, you shouldn’t want to do it manually from scratch when you can just click a button and instantly get the desired result. Right?
That’s what Background Alpha is for. It allows you to insert a “background image” component into any container in seconds.
How to use this frame
- Insert Background Alpha into any container.
- Select the parent container (not Background Alpha, but the container that contains Background Alpha) and set it to position relative.
- Add the following to the CSS tab of the parent container: root {isolation: isolate;}
- Swap the image with any image you’d like.
- Adjust your overlay style.
Have fun!
Variables
This frame doesn't use any locally scoped variables.
Other frames within this frame may contain variables. You can see all related frames further down the page.
HTML5 Tags & Attributes
Other frames within this frame may contain specific HTML5 tags. You can see all related frames further down the page.
Accessibility Notes
Related Frames
No related frames.
FAQs
Should I set the overlay style at the ID level or class level?
Probably both.
If you set an overlay style at the class level, that will be your default overlay for all iterations of Background Alpha. This will give you a good starting point any time you add the frame to a container.
On the other hand, you may not want to always use the same overlay style. In that case, you can control single instances of Background Alpha by setting the overlay style at the ID level.
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.