I am trying to use an image module as the background of a div, so that I can change the image in the wysiwyg editor.
I have the code set up as
<section style="width:100%; height:960px;background:url({% image 'Hero_image' label='Hero Image', alt='Hero Image', src="../hero-1600x960.png" %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">
What I get is the image followed by
'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">
Is the second curly bracket causing a problem? Do I need to do something with **bleep** characters? Is there another way to do this? Any other thoughts?
Thanks,
Jonathan
Image renders an image tag, which you don’t need..
You only want to render an image url, using: image_src
so what you need is this:
<section style="width:100%; height:960px;background:url('{% image_src "image_src" src="-URL-to-image-placeholder.jpg", no_wrapper=True %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">
More info?
Thanks. Worked perfectly!
Actually - let me take that back. It worked to get the image styled correctly. But when I edit the page I can’t use the widget to change the image.
Whatever image I change it to it still shows the original image.
And you’re sure that:
- you saved and published before leaving the page?
- that it’s not a caching issue? (check the page in an incognito tab)