Thanks! apparently when I tried this before my -moz and -o styles combined with url were killing it and I didnt think remove them. This made it very easy to use the simple CSS style method and not all the extra divs.
On Friday, July 24, 2015 at 6:14:01 PM UTC-7, Frankie Fu wrote: > > 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] <javascript:>> 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] <javascript:>. >> 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/06381630-f1c6-49bf-9ddc-d72542bcff39%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
