How to use first image from blog post as background image?

Help
1

Hello
Am using GitHub pages to host a blog
Am stuck with a supposed simple task…
Have gotten the first image using liquid
And applying split I got this output \images\first-post.png from {{ html }}
But when I do <div style="background-image:url( {{ html }} )"></div> it doesn’t work… Pls I need help

2

Show the HTML source that is rendered and see the URL rendered there.

Then inspect the HTML and see the CSS on that div.

Your syntax looks invalid. Add quotes around the URL like this.

"background-image:url( '{{ html }}' )"

Also you are using Windows style path with backslashes - browser URLs work with forwardslash.

Use replace or maybe there’s a cleaner way.