I am looking to dynamically set a background image based on a url that comes in through the model. I have tailwind setup and can receive a static url, but I can’t figure out how to have the URL come from the model itself.
The code is style=“background-image: url(https://someimage.com/image.jpg)” and that works fine. I want to swap that URL out for what’s in model.info.url
what else do I need to have this set to display properly?
Thanks in advance
Is the image set to all pages or a specific one?
I would create an HTML =img element with absolute positioning and a low z order. Then you can bind it to a key in app or model instead of hard coding in the CSS settings.
It’s set to one element in a specific page (and that will be the only place it’s used). Use case is that it’s the background of a table that shows comparative statistics between two areas, and the image is a background of the local area (think, Golden Gate Bridge, based on the zip code). right now, the image is hard coded through css, and shows up as the background of an html element that is governed by tailwind. If I change to the technique that you recommend, would I need to name that in style classes in the html section in the BF Editor?
I do have the URL set in the model as it comes in from BF. model.zipInfo.splash is the key for the url that’s related to the specific zip code…
Don’t forget to make sure zipInfo is always defined if it’s children data change.