Core Text and images

A background picture the client can replace

fld-bg-image="Field name"

For a section or a banner whose picture is set as a CSS background, not as an <img>.

Where it goes

On the block with the background. The build adds background-image to its style; colours, padding and the other styles stay.

“Load data” takes the starting picture from the inline style or, in a Webflow export, finds it by the block’s class in the CSS.

The field appears in the admin only if the page has a group name: wp-fields-group on its <body>.

Markup index.html

<section class="hero" fld-bg-image="Hero background">
  <h1 fld-text="Hero title">Coffee for slow mornings</h1>
</section>

In the admin Pages → Home

Hero background window.jpg

Hero title Coffee for slow mornings

On the site the home page

Hero background: window.jpg Coffee for slow mornings

The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.

Not like this

<img src="images/latte.jpg" alt="Latte" fld-bg-image="Photo">

On an image the attribute adds a background behind it, and the picture itself stays fixed. The build log flags the wrong element.

Like this

<img src="images/latte.jpg" alt="Latte" fld-image="Photo">

An <img> gets fld-image.

The same in site settings

`fld-bg-image`	on a page or post
`opt-bg-image`	in site settings, such as one background for all page headers

Alternative spelling

f_bg_image, o_bg_image works the same: the build gives an identical theme.

Ready when you are