Angular Material Transparent Toolbar
<p>I'm using angular material on a rails app, want a toolbar to sit on top of an image and make that toolbar clear so you can see the image behind it. Here is the code so far:</p>

<pre><code>&lt;div layout="column" layout-fill&gt;
&lt;div layout="row"&gt;
    &lt;img src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/yosemite-smart-black-bear_h.jpg?itok=kKS8ILd9"&gt;
    &lt;md-toolbar id="toolbar" class="transparent"&gt;
        &lt;div class="md-toolbar-tools"&gt;
            &lt;span&gt;Turbo Mortgages&lt;/span&gt;
            &lt;!-- fill up the space between left and right area --&gt;
            &lt;span flex&gt;&lt;/span&gt;
            &lt;md-button ui-sref="app.register"
                       aria-label="Toggle Mobile Navigation"&gt;
                About
            &lt;/md-button&gt;
            &lt;md-button ui-sref="app.join"
                       aria-label="Toggle Mobile Navigation"&gt;
                Join
            &lt;/md-button&gt;
            &lt;md-button ui-sref="app.login"
                       aria-label="Toggle Mobile Navigation"&gt;
                Login
            &lt;/md-button&gt;
        &lt;/div&gt;
    &lt;/md-toolbar&gt;
&lt;/div&gt;
&lt;md-content&gt;
    &lt;ng-view&gt;&lt;/ng-view&gt;
&lt;/md-content&gt;
</code></pre>

<p></p>

<p>and what I see on the page right now is just the image...here is the css:</p>

<pre><code>#toolbar {
    position:relative;
    z-index:1000;
}
</code></pre>

<p>how do i get the toolbar to lay on top of the image if not with z-index? thanks for help!</p>