# Component background image property

**URL:** <https://forum.bricksbuilder.io/t/component-background-image-property/39289>\
**Category:** Feature Requests / Improvements\
**Tags:** feedback\
**Created:** [May 28, 2026, 7:14am UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289 "2026-05-28T07:14:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andris](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/andris/32/30200_2.png) [@Andris](https://forum.bricksbuilder.io/u/Andris)\
**Post date:** [May 28, 2026, 7:14am UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289/1 "2026-05-28T07:14:18Z")

</div>

How can I create and connect a background-image property to a component in Bricks? Couldn’t find relevant topics.

I created a card component that should have variable background but I cannot link a background-image property to it.

Any help is appreciated!

@timmse

---

<div class="post-metadata">

**Author:** ![cypher](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/cypher/32/6160_2.png) [@cypher](https://forum.bricksbuilder.io/u/cypher)\
**Post date:** [May 28, 2026, 1:29pm UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289/2 "2026-05-28T13:29:26Z")

</div>

From my understanding and use of the component system, the component’s definition should own the look whereas the consumer controls the content plus a bounded set of choices. If any prop can set any property (like connecting the background-image property to an option to add anything), the component’s styling is no longer owned by the component (the bounded set of options is meaningless or repetitive).

If you want the component to appear differently in different contexts (a section may be normal or danger variant and would update the look accordingly), use variants. Then the consumer can select from a list of options (variants) for what background-image to apply. It keeps the component within the system, not allowing for drift that an open-ended background-image prop connection facilitates.

Props should configure components’ content and bounded options, whereas styles should be owned by classes/variants/tokens. If it’s component-specific, it should be a variant; if it’s cross-cutting treatments like a surface (`surface-muted` or `surface-inverse` can show up on sections, cards, and callouts alike), global classes exposed through a class prop may be better.

---

<div class="post-metadata">

**Author:** ![Andris](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/andris/32/30200_2.png) [@Andris](https://forum.bricksbuilder.io/u/Andris)\
**Post date:** [May 29, 2026, 5:32am UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289/3 "2026-05-29T05:32:25Z")

</div>

In my case I am the developer and the customer also.

I think that the background image is also a property that can and should be varied by the user/customer. Like I said: I wanted to create card elements with variable background images. There should be an option for me to select any background for any card and not just a select few that the variants would offer. Now I have to expand all these cards from components and style them individually cancelling the benefits of having components that I can reuse and modify at once if needed.

It would be middle ground if we can use text based properties in native CSS. Then I can define a URL of the image that I can link in the CSS like this:

```auto
%root% {
  background-image: no-repeat url('%defined_background_url%');
}

```

@timmse what is the developers’ opinion about this need/issue/use case?

---

<div class="post-metadata">

**Author:** ![Illarion](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/illarion/32/13866_2.png) [@Illarion](https://forum.bricksbuilder.io/u/Illarion)\
**Post date:** [May 29, 2026, 6:27am UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289/4 "2026-05-29T06:27:27Z")

</div>

The problem is CSS cannot handle dynamic data properly. Even now, if you add the background image inside a class, Bricks will make attributes like ‘data-query-index’ to handle it, because class properties must stay the same.

To be honest, it’s better to use actual `<img>` with `position: absolute` and `inset: 0` where you need a background. It can be easily converted to webp/avif, lazyloaded, have an alt attribute etc.

---

<div class="post-metadata">

**Author:** ![Andris](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/andris/32/30200_2.png) [@Andris](https://forum.bricksbuilder.io/u/Andris)\
**Post date:** [May 29, 2026, 6:44am UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289/5 "2026-05-29T06:44:07Z")

</div>

Thank you, I will try this method!

---

<div class="post-metadata">

**Author:** ![Andris](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/andris/32/30200_2.png) [@Andris](https://forum.bricksbuilder.io/u/Andris)\
**Post date:** [July 27, 2026, 7:31am UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289/7 "2026-07-27T07:31:19Z")

</div>

Hey, it is strange my quoted comment contains a link I don’t recognize. Why is that? Mistyping?

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [July 27, 2026, 1:21pm UTC](https://forum.bricksbuilder.io/t/component-background-image-property/39289/8 "2026-07-27T13:21:03Z")

</div>

We’ve probably just exposed a spambot @Andris 🤖