Syntax to link to an image as background-image property in October CMS

Question

I've tried using the Ocober CMS syntax and relative URL in linking to an image in CSS background-image property. Please how do I achieve this. Code looks like

style="background-image: url('/assets/img/h2.jpg');"

I'm trying to this from a page file.

Answer 1

Change your code like this,

style="background-image: url({{asset('/assets/img/h2.jpg')}});"

You need full path of the image so asset will add the path up to public directory and then further location will be added.

I hope you understand.

Answer 2

Put the image in assets/img folder(create a new folder if it is not there) of your theme and link the image with that path.

you can call in your .htm file like that

style="background-image: url({{ 'assets/img/h2.jpg'|theme }});"

Answer 3

If you're trying to do the background image cover responsive trick and still don't see any img, you might need to add

height: 100%;

for example,

<div style="height: 100%; background-size: cover; background-image: url({{ 'my-img.jpg'|media }});"></div>

that solve the issue for me