CODEWITHSUNDEEP
htmlcsspolymerweb-component
Ido Fang Bentov
Ido Fang Bentov

Reputation: 178

Custom Properties in Polymer aren't working

I have a Polymer app-header element in my master page. I would like to transition from an image to a solid color when scrolling down. To do so, according to the documentation, I need to add a --app-header-background-rear-layer custom property to my app--header in the stylesheet. Here is my Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="DarkSoulsMaster.Master.cs" Inherits="DarkSouls.DarkSoulsMaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css"/>
    <script>
      Polymer = {
        lazyRegister: true,
        useNativeCSSProperties: true
      };
    </script>
    <link rel="import" href="bower_components/polymer/polymer.html" />
    <link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html"/>
    <link rel="import" href="bower_components/app-layout/app-header/app-header.html"/>
    <link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"/>
    <link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html"/>
    <link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html"/>
    <link rel="import" href="bower_components/app-layout/app-drawer-layout/app-drawer-layout.html"/>
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html" />
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html" />
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" ></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form" runat="server">
        <div style="overflow: auto;">
            <app-header-layout>
                <app-header condenses shadow fixed effects="resize-title blend-background">
                    <app-toolbar>
                        <div style="color: white; font-size: 36px; margin:auto" class="title-main" condensed-title>Dark Souls</div>
                        <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
                    </app-toolbar>
                    <app-toolbar>
                        <div style="transform-origin: top, center; color: white;" class="title-main" main-title>Dark Souls</div>
                    </app-toolbar>
                </app-header>
                <app-drawer-layout>
                    <app-drawer id="drawer" align="right" persistent="false">
                        <div style="height: 100%; background-color: white; padding-top:256px;">
                            <paper-icon-item>
                                <iron-icon icon="home" item-icon></iron-icon>
                                דף הבית
                            </paper-icon-item>
                        </div>
                    </app-drawer>
                        <div class="main">
                            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                 </app-drawer-layout>
            </app-header-layout>
        </div>
    </form>
</body>
</html>

And here is my app-header in the css file:

app-header {
    background-position-x: 60%;
    background-position-y: 15%;
    height: 256px;
    background-color: #263238;

    --app-header-background-rear-layer: {
        background: linear-gradient(rgba(38, 50, 56, 0.5), rgba(38, 50, 56, 0.5)), url(../res/header.jpg); <!--This is the image -->
  };
}

The problem is that the image doesn't appear. Only a solid blue-grey header is seen. I am pretty sure the problem is in the custom property: --app-header-background-rear-layer because it is the only thing that doesn't change the appearance of the website.

enter image description here

Upvotes: 1

Views: 136

Answers (1)

Supersharp
Supersharp

Reputation: 31161

Polymer custom CSS properties like --app-header-background-rear-layer should be used in a custom style element <style is="custom-style">.

So you should use an inline <style is="custom-style"> element, or import it in a <link rel="import" href="style.css"> element.

Upvotes: 1

Related Questions