Thank you so much for your help! This information has helped me greatly.
However, I cut and pasted the same code from
http://jsbin.com/zagorevaqo/edit?html,css,output, on to my local
development. With the exception of the <base
href="http://milestech.net/components/";> and <script
src="webcomponentsjs/webcomponents-lite.min.js"></script>, I did my local
injections from the bower dir. The layout was wonky. The picture had no
height and when I manually added the height it seems pushed down. I am
using Polymer 1.0.3 and iron-flex-layout 1.0.2. What would cause this
discrepancy?
On my local server, I was able to make it look like the google I/O site
with(although I'm sure in the long run I will find I did not do it
correctly):
<div class="layout vertical center-justified">
<div id="video-photo-container" class="fullbleed fit">
<div class="horizontal layout center" style="height: 100%">
<div class="layout vertical center" style="width: 100%">
<div id="play-button-container" class="horizontal center-center
layout wrap">
<div id="play-button-png"></div>
<h5>See and hear the story</h5>
</div>
</div>
</div>
</div>
</div>
html,body {
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
.video-dialog {
max-height: 100%;
max-width: 100%;
}
#video-photo-container {
min-height: 100px;
background-image: url("../img/pastor_mulinde3.jpg");
position: aboslute;
background-size: cover;
top: 50px;
z-index: -1;
max-height: 500px;
}
#play-button-png {
background: url("../img/play-video-button.png") no-repeat 50% 0;
background-size: 40px;
height: 60px;
width: 50px;
}
#play-button-container {
width: 150px;
height: 150px;
}
div#video-photo-container h5 {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 24px;
}
On Wednesday, July 8, 2015 at 11:24:11 AM UTC-5, Eric Bidelman wrote:
>
> Think this is what you're after:
> http://jsbin.com/zagorevaqo/edit?html,css,output
>
> On Tue, Jul 7, 2015 at 7:52 AM Darin Hensley <[email protected]
> <javascript:>> wrote:
>
>> Stackover flow cross post:
>> http://stackoverflow.com/questions/31272000/polymer-1-0-layout-issues-background-image-center-play-button-and-document-fl
>>
>> I am new to the Polymer layout scheme and having issues along with a few
>> questions.
>>
>> *Here is the jsbin*: http://jsbin.com/takoxe/edit?html,css,output
>>
>> 1) For the picture of king david, I am trying to display it full width
>> and height and have it responsive. I should be able to do this with just
>> `fullbleed fit`, but instead I have to use `top: 50px; z-index: -1`. I am
>> sure I am doing this wrong and if someone could show me the correct way,
>> please.
>>
>
> `fullbleed` only works on <body>. Instead, I made the <body> a flexbox
> container using `layout vertical`, and told the center <div> to flex to it
> takes up the entire middle section.
>
>
>>
>> 2) I can not get the `play-button-contain` and `play-button-video` to
>> center in the middle vertically and it doesn't stay in the middle
>> responsive when I move it. I was hoping `class="layout vertical"` would be
>> the answer but it's not.
>>
>> 3) I later on, as I add the page, I will add a section/polymer element
>> underneath the King David picture. So, as a filler I used `<h5>A new
>> section that should be on the bottom, not top</h5>` but instead it shows on
>> top of the King David picture. This is really confusing since it's not
>> following the document flow.
>>
>
> Since the center section is flexing, it pushes this bar down to the
> bottom. If that's not what you want, you could also make it position:
> absolute; bottom: 0; width: 100%;
>
>
>>
>> I am using the https://events.google.com/io2015/ site as a model, which
>> I like alot. This is why I am using `background-image`, etc for this set up
>> and not some other way.
>>
>> 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/9224a9d5-761a-411c-8be0-2d1d3d97b603%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/9224a9d5-761a-411c-8be0-2d1d3d97b603%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/dce7beee-bc84-4d64-b1f8-e0954b14918e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
