I had a quick question in regard to the new Bricks version and components.
I was playing with components and seems straight forward (great add on BTW) but I can’t figure out how to connect a background image? I have created a card with a background image, heading, text, and button just for experimenting and it has all been a very easy process to create the component, create the properties and connect them EXCEPT the background image. I can’t figure it out, connecting an image is easy but the background image does not give you the option to connect the property… I’m sure there is an easy answer but if someone could point me in the direction it would be great!
I’m having the same issue. There doesn’t seem to be any way to apply the image to a background, and this would be really useful to make it easier for end users.
Is there any way of using dynamic data or anything like that to access the Component values? or even accessing the image through PHP?
Components are still limited. They cannot be connected to CSS properties at the moment. Background image is a CSS property, unless you do a background image using a proper image element which can be connected to the existing image property.
This isn’t a “missing feature” — you simply can’t connect props to CSS properties directly (background-image lives in CSS, not in HTML — unless you connect it via the style attribute, but then you have to write the entire CSS property in the component property field like background-image: url({acf_bg_image}) instead of just {acf_bg_image}).
Barnabas’s workaround (using <img> positioned absolute as background) is actually good solution for this use case.
The real fix would be making props available as dynamic data tags (like {props.propName}). This would let you elegantly connect props in the Attributes panel:
I’d argue that this is missing feature. CSS background images should be a connectable property. Background images are extremely common. Using an img with absolute positioning works but it unnecessarily adds to the DOM size. Components are sorely missing this function for say… hero image sections. The layout never changes, just the text and the background image.
I’d like to see Properties available as dynamic data, but that still wouldn’t work in this case because you can add a value for unconnected properties when you place a component.
Thanks, @Kilwag. I agree that sometimes the <img> workaround is kinda clunky. (Though the <img> tag does have its own SEO/lazy-load benefits, but that’s a separate debate!)
The main point is I think there’s a misunderstanding of how the {props.propName} solution would work. You said:
I’d like to see Properties available as dynamic data, but that still wouldn’t work in this case because you can add a value for unconnected properties when you place a component.
It absolutely would work, and it’s the perfect solution for this. Here’s the exact workflow:
Inside the Component: The developer creates a Component Property. Let’s call it heroBackground (Type: Image).
Inside the Component’s Attributes: The developer sets this up once on the root element of the component:
On the Page (The Instance): When the user places this component instance on a page, they will see the heroBackground property in the control panel. They can then set its value right there—either by picking an image from the media library or, even better, connecting it to a dynamic data source like {acf_hero_image}.
The final rendered HTML would be <section style="background-image: url(path/to/my/image.jpg)">...</section>.
This is the exact behavior we both want.
The DOM stays clean (no extra <img>).
The user gets a simple image picker on the component instance.
The developer has full control.
This is why it’s a superior system-level fix. It solves this problem and thousands of other potential problems, without requiring the Bricks team to add a new, specific UI control for every single CSS property we might ever need.
You make some good points. I get why you think it would be a superior system. I still think that sort of buries a common thing under an extra couple of steps. But I agree, that would eliminate the need to add every CSS property.