Template problem with background image

I’m trying to show a background image in my template like this:

{% set back_image = theme_url ~ '/images/' ~ page.header.background.image  %}

<div class="modular-row callout" style="padding-bottom: 60px; background-image: {{ back_color }}  url({{ back_image }}) repeat left top;">

But GRAV generates this output with the image name missing:

<div class="modular-row callout" style="padding-bottom: 10px; padding-top: 30px; background: #00ff00 url(/user/themes/gravitas/images/) repeat left top;">

while showing the content of {{ back_image }} clearly output this:

background: #00ff00 url(/user/themes/gravitas/images/lillies.gif) repeat left top; 

What’s wrong here?

This drives me mental now.

Two user defined parameters in the page.header

background:
    image: 'pattern.png'
    color: '#440000'

I want to show this color/image as a div background.
But it simply won’t work. Please help.