Polymer element doesn't display background-image passed with Custom CSS properties

Question

I'm having trouble understanding why I can't pass a custom CSS property for a background image to a polymer element. Using CCS properties for styling Polymer elements is explained here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details and this works for some elements (example the grey background in my code below).

<body>
    <dom-module id="my-element">
        <template>
            <style>
            :host {
                display: block;
                height: 300px;
                background-color: grey;
                color: var(--container-text, white);
                background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
                /* THIS WORKS
                background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
                */
            }
            </style>
            <div class='container'>Text color is correct, but no background image</div>
        </template>
        <script>
            Polymer({ is: 'my-element'});
        </script>
    </dom-module>
    <my-element></my-element>
</body>

I have two question:

Why isn't this working?
What is the best way to solve this?

Code is here: http://jsbin.com/yuxobexepe/edit?html,output

Thanks!

Paul

Pascal Gula Pascal Gula · Accepted Answer · 2015-12-13T16:18:27

You are mixing the definition/usage of CSS property. Here is a working JSBIN of your problem:

<html>
<head>
  <base href="http://polygit.org/polymer/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
        height: 300px;
        background-color: grey;
        color: var(--container-text, blue);
        background-image: var(--container-background, "default.png");

        --container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
      }
    </style>
    <div class='container'>Text color is correct, but no background image</div>
  </template>
    <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({ is: 'my-element'});
    });
    </script>
  </dom-module>

  <my-element></my-element>

</body>
</html>

background-image is using the value of --container-background if it exists, or default to what you give. Then you define separately the --container-background property, usually, outside of the component itself.

Polymer element doesn't display background-image passed with Custom CSS properties

1 Answers