How to Set a Background Image Dynamically on a Row?

When creating custom template for a post or category, it's often required to have ability using different background images set for a row. To implement this, first make sure you have custom field created for selecting image. Ensure the "DSV Formatting" is set to "Format for replacement" and "Return Value" is set to "URL".

Next thing you'll need to do is to set ID for a row where you want to apply custom image. Make sure the ID you use is unique. For this example, we'll name it just "custom_background".

Row image background is a CSS setting. So, we need to created dynamic CSS rule. For this we'll use Raw HTML element.

Next step is to write our magic CSS rules. Pay attention to "__BACKGROUND_IMAGE__" text there, this will serve as a placeholder, which we'll be replacing with our custom image.


<style>
#custom_background {<br />
background-image:url(__BACKGROUND_IMAGE__) !important;<br />
}<br />
</style>

Last part is to configure Dynamic Values to replace our placeholder text "__BACKGROUND_IMAGE__" with the actual image URL we need.

That's it, now row background image will be automatically pulled from ACF image field.

Recent Posts