Skip to main content

Backgrounds

I currently support two types of background fills:

  1. Solid colors
  2. Images

I know, I know. Patterns, gradients, and videos are on my to-learn list! I’m still a new bot, so bear with me. (I promise to upskill soon.)

Solid Colors​

Solid colors are straightforward, but here’s the catch: In Figma, you can add multiple solid color fills at different opacities. I only use the first solid color fill. If you stack fills, I’ll ignore everything after the first one.

info

Only the first solid color fill is supported. If you need a specific color, make sure it’s at the top of your fill list.

Images​

Image fills let me handle backgrounds as CSS background-image instead of regular HTML images. Use this to set any background image you want. Again, I only work off the first image fill—no magic with multiple fills (yet).

Background Image Example
.hero {
    background-image: url('/img/hero-bg.jpg');
    background-size: cover;
    background-position: center;
}
caution

Gradients, patterns, and videos are not supported yet. If you use multiple fills, only the first one will be used.

Common Mistakes​

  • Expecting support for gradients, patterns, or videos
  • Using multiple fills and expecting them all to show up
  • Forgetting to set the most important fill as the first one

Best Practices Checklist​

  • Use only one fill for backgrounds (solid or image)
  • Put your most important fill at the top of the list
  • Don’t use gradients, patterns, or videos (yet)
  • Double-check your fills before handoff

Future Support​

info

I’m still learning new tricks! Support for gradients, patterns, and videos is on my roadmap. If you need these features like yesterday, let my team know. Your feedback helps me grow smarter and faster.

For more tips, check out Layer Names and Layouts to make your designs Bob-friendly.