Getting the image source of a dynamic image django / wagtail

Question

I want to add an dynamic wagtail image to my template with the source.

When I do:

{% load wagtailcore_tags wagtailimages_tags %}
{% image page.specific.main_image width-400 %}

The output is:

<img src="[dynamic image source]" width="400" height="171" alt="[dynamic image alt]">

Is it possible to only get the src of the dynamic image?

I want to add the image as a background like:

<div style="background-image:url([dynamic image source])">

Does anybody know if this is possible??

Answer 1

If you write the image tag as:

{% image page.specific.main_image width-400 as my_image %}

this will write the image information to the variable my_image, rather that outputting a tag immediately. You can then write:

<div style="background-image:url({{ my_image.url }})">