Background Alpha

Using a real image that behaves as a background image has multiple benefits over using an actual background image:

• SRCSET compatibility
• ALT tags
• Lazy loading

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

1. Insert Background Alpha into any container.
2. Select the parent container (not Background Alpha, but the container that contains Background Alpha) and set it to position relative.
3. Add the following to the CSS tab of the parent container: root {isolation: isolate;}
4. Swap the image with any image you’d like.
5. Adjust your overlay style.

How to use this frame multiple times on the same site

Our recommendation for styling this frame is to set base styles on the classes. This is the default style that will be applied to the frame every time you insert it. If there’s an alternate style that you want to use in multiple instances of the frame, assign those styles to a modifier class (e.g. .fr-background-alpha--different-style). If you want to apply unique styles to only one instance of this frame, you can use the ID level for styling.