In CSS you can apply multiple backgrounds to the same element (
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds)
and that may help you to achieve what you want. e.g.
--paper-scroll-header-panel-full-header: {
background-image: url(images/transparent-image.png),
radial-gradient(#ffb837, #f13c0d);
}
On Thu, Jul 23, 2015 at 9:39 PM, <[email protected]> wrote:
> I am trying to understand the proper way to setup a
> paper-scroll-header-panel that transitions from a 'tall' size where the
> background is a combination of a CSS gradient with a mostly transparent
> bg-image over top of it to a condense version that is just a solid color.
>
> The demo here
> https://elements.polymer-project.org/elements/paper-scroll-header-panel?view=demo:demo/index.html&active=paper-scroll-header-panel
> is mostly what I am after (I want the condensed header to stay at the top)
> but its structure seems a lot different than I read elsewhere and have most
> working right now.
>
> My current setup is uses this CSS class:
>
> paper-scroll-header-panel {
>> --paper-scroll-header-panel-full-header: {
>> background: -webkit-radial-gradient(#ffb837, #f13c0d); /* Safari
>> 5.1 to 6.0 */
>> background: -o-radial-gradient(#ffb837, #f13c0d); /* For Opera
>> 11.6 to 12.0 */
>> background: -moz-radial-gradient(#ffb837, #f13c0d); /* For
>> Firefox 3.6 to 15 */
>> background: radial-gradient(#ffb837, #f13c0d); /* Standard
>> syntax */
>> };
>> --paper-scroll-header-panel-condensed-header: {
>> background-color: #f13c0d;
>> };
>> }
>
>
> combined with very simple html structure:
>
> <paper-scroll-header-panel condenses keep-condensed-header>
>> <paper-toolbar class="tall layout horizontal">
>> <div class="bottom horizontal layout">
>> <div class="paper-font-subhead">Title</div>
>> </div>
>> </paper-toolbar>
>> <!-- content stuff -->
>> </ paper-scroll-header-panel>
>
>
> This works for the basic transition from tall header with gradient
> background to condensed header with solid background. However, I need to
> add a background image over the top of the gradient and since I cant
> combine the gradient and background image in the same CSS style (or at
> least my attempts have failed) I am trying to find a workaround....which
> led me to the demo I linked to above..
>
> The demo doesn't use CSS classes I am using now and seems to use a verbose
> method with a bunch of extra divs...the general idea is this:
>
> <paper-scroll-header-panel>
>> <div class="headerContainer>
>> <div class="bg-container paper-scroll-header-panel>
>> <div id="condensedHeaderBg" class="paper-scroll-header-panel"></div>
>> <div id="headerBg" class="paper-scroll-header-panel"></div>
>> </div>
>> </div>
>> <!-- paper-toolbar stuff -->
>> </paper-scroll-header-panel>
>
>
> I believe the IDs that are used have built in functionality with polymer
> to fade between when resizing. I think this method with the extra divs may
> allow me to add in an image over the top of the gradient in an easier
> fashion and have the polymer transition effects added to it
> automatically...however I cannot for the life of me figure out the proper
> structure to make this work.
>
> What is the correct way to work with this dang paper-scroll-header-panel
> and style the header and still get all the transition effects without
> having to write separate event handlers to resize and fade extra things
> like image or really anything else you could throw into a panel header? For
> what its worth I have found it very hard to google search for specific
> parts of "polymer"/"paper elements"/"material design" help as I either get
> back results from the polymer website (which I honestly havent found super
> helpful) or random things about those actual real world materials...seems
> the name of this framework and its elements make it very hard to search for
> relevant info.
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/fd784e4f-97e3-4c7b-9f42-e5a0f56110cf%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/fd784e4f-97e3-4c7b-9f42-e5a0f56110cf%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAAGTQkAf5r4ojV3aXtC0A6a2puHaE_U%2BjaKTb1ErouCa23T3uA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
