How would you add inline style (background-image) on a DIV like in the following example?
I’m aiming to place a unique background image on several divs the class would handle the styling.
<div style="background-image:url("https://global-uploads.webflow.com/yourimage.jpg")" class="mobile-thumbnail-wrap creative-thumb-wrap"></div>
Webflows Custom Attributes doesn’t allow adding inline style to a DIV
You could use the HTML embed and hand code your div with inline styles. But to change the background image you need to change the class, or make a combo class like:
[Masthead][Home]
[Masthead][Services]
Where the image used for the background is changed by the combo classes “Home” and “Services”.
CMS items are an exception, those are inlined by Webflow automatically.
Does that make sense?
due to the number of divs needing background images (15 per page x 9 pages) the combo classes isn’t ideal.
Embed is what I’m leaning towards only the client will never be able to manage that moving forward.
CMS I can’t apply to my case as I require over 30 fields (webflow field limit) 15 videos plus 15 thumbs plus 15 titles leaves me building out each page manually.
Will continue with the embed method until I find another solution.
The original reference link that shows what needs to happen is here: Nuno Xico - Post | Good Company I’m going to assume this is also done with embed
You could use a data attribute on each div that’s value is the URL of the BG image and then use a jQuery function to loop through each div with that data attribute, get the value and insert it inline.
Sam that is a great idea!
I have not explored the power of Data Attributes with a loop function. I’m sure it will expand into a world of possibilities.
Any luck with that approach? Let me know if you need help with the jQuery.
I took the direction of using a regular image black in a Webflow Lightbox element - You can see it here. http://bonch.webflow.io.