I used Polymer to redesign the website. I want to show the image attached to the element as background-image. Pretty simple task, but unfortunately I am having some problems.
I did a code run 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">
</div>
<div class="description">
<content select="h2"></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer('album-card');
</script>
</polymer-element>
The problem is in css style. For some reason, the image will not be displayed in the following line: background: url({{image}}) no-repeat;. However, when used {{image}}in the body elsewhere (the <div class="circular">image is displayed.
Replacing {{image}}inside a style with a direct link also works.
What am I doing wrong?
source
share