Adam Weitzman Adam Weitzman - 3 months ago 45
CSS Question

Angular Material Transparent Toolbar

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:

<div layout="column" layout-fill>
<div layout="row">
<img src="">
<md-toolbar id="toolbar" class="transparent">
<div class="md-toolbar-tools">
<span>Turbo Mortgages</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button ui-sref="app.register"
aria-label="Toggle Mobile Navigation">
<md-button ui-sref="app.join"
aria-label="Toggle Mobile Navigation">
<md-button ui-sref="app.login"
aria-label="Toggle Mobile Navigation">

and what I see on the page right now is just the is the css:

#toolbar {

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


I ended up making the image the background of the toolbar...You could also set the

position: absolute

on the toolbar to place it over the image