Transparent Toolbar

gobiyau

Recently I am writing with transparent Toolbar. It works fine with using background-image.

<ons-page>
  <ons-toolbar modifier="transparent">
     <div class="left"><ons-back-button></ons-back-button></div>
  </ons-toolbar>
</ons-page> 
<style>
  .page__background {
    background-image: url(..)
  }
</style>

But if when I add div, or carousel in the page__content just like the following code:

<ons-page>
   <ons-toolbar modifier="transparent">
     <div class="left"><ons-back-button></ons-back-button></div>
  </ons-toolbar>
 <img src="images/... " style="width:100%;"> 
</ons-page>

then it will have a transparent toolbar, under the toolbar it shows the image.

If I put the following css, it goes fine.

<style>
  .page__content
    { 
      top: 0 !important;
    }
</style>

My question is: is this the correct way to do with Transparent Toolbar? If yes, then how to link up toolbar–transparent with page__content?

Best Regards,
Gobi