Frames Logo
Buy Now - $200

Background Alpha

overview

A real image with an overlay that behaves as a background image.

Background Alpha
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

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

  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.

Frame Created on February 9, 2023

Frame Last Updated on September 30, 2023

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.