Custom CSS for image overlay

Hey Boundless team & community, I’m looking to use CSS to overlay text and images on top of another image.

I know it’s possible to do this by using the image as the section background, but this removes the ability to link the image to a record field in the user table.

Here is an example:

Because I’m not able to set an HTML parameters myself, the CSS examples I’ve found online aren’t workable.

Any thoughts on how to do this?

Hi @Andrew,

Are you trying to get the car image/section to link to a user profile? I’ll see if I can figure something out.

1 Like

Whichever method means that the background image can be linked to the user profile is ideal.

So either the section background (car image) linking to a data field, or the car image being an image node itself with the other content on top of it using CSS.

1 Like

@Andrew is the User you’re trying to link to in a Record List? If so, does each Record have a different background image or something like that?

@adam For more context, this will be part of the user’s profile page. So the background image (car in this example) would be set by the user and would be a field in the user table.

Same with the smaller overlay picture and text, both of which would be fields in the user table.

Ideally the user can set each of these themselves on a different page, where there is an upload form.

1 Like

Okay, thanks for clarifying! When I read “link” I was thinking an actual link to another page, but what you described makes perfect sense. We don’t have a way to have background images be pulled from data, but we think this should be easy to implement and a good feature to have. I’ll post here with more info when we have it.