Polymer Image as Background with data binding

Question

I've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image. A fairly simple task, but unfortunately I'm having some issues.

I made a running sample of the code for easy testing: click me.

  <polymer-element name="album-card" attributes="image">

    <template>
      <style>
        :host{
          display: block;
          position: relative;
          background-color: #99182c;
          width: 200px;
        }
        .description{
          padding: 10px;
          color: white;
        }
        .circular{
          width: 200px;
          height: 200px;
          background: url({{image}}) no-repeat;
          background-color:green;
        }
      </style><link rel="stylesheet" href="default_styles.css">

      <paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
      <div class="album-header" vertical layout>
        <paper-ripple class="recenteringTouch" fit></paper-ripple>
        <div class="circular">
          <!--<img src="{{image}}" />--><!-- this does work -->
        </div>
        <div class="description">
          <content select="h2"></content>
          <content select="h4"></content>
        </div>
      </div>

    </template>

    <script>
      Polymer('album-card');
    </script>

  </polymer-element>

The issue is in the css styling. For some reason the image doesn't diplay in the following line: background: url({{image}}) no-repeat;. However, when using {{image}} in the body somewhere else (in the <div class="circular">, the image does display.

Replacing the {{image}} inside the styling with the direct link also works.

What am I doing wrong?

Answer 1

This looks like a bug. The {{}} are being interrupted literally instead of being parsed by the template engine. Replacing them with [[]] one time bindings works: http://jsbin.com/yocokire/4/edit

However, you should avoi using data-binding inside of <style> if possible (see https://github.com/Polymer/polymer/issues/270#issuecomment-24683309). There are perforamnce concerns and issues under the polyfill. Instead, use a style attribute on the element and do your binding there: http://jsbin.com/riqizige/1/edit