3. Extra tall navbar header for OnsenUI/PhoneGap app, with SVG background?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Extra tall navbar header for OnsenUI/PhoneGap app, with SVG background?

  • A

    I’m building an app using Onsen UI and PhoneGap that requires having an extra tall header on one of the pages, with an SVG background image, but hamburger menu icon would be on top. So needs to be like:

    alt text

    Header image is above the horizontal line, below that it’s just a regular Onsen UI layout with various content (e.g. a list).

    Image does need to be full width as shown and scale to fit whatever device it’s shown on (phone or tablet).

    Is this possible, and if so how? Couldn’t see anything obvious in the docs.

    Thanks

    0
  • M

    Try something like this…

    <style>
#bg1 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%; 
background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");)
}
</style>

<ons-page id="myPage">
<ons-toolbar style="height: 120px;" id="MainToolbar">
<div
	<div class="left" id="MainToolbar_leftDiv">
		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
	</div>
</ons-toolbar>
<div id="hiddenspace" style="height: 72px;"><!--Hidden Space to Account for Header Height Increase--!></div>
<ons-card>
    <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%">
    <div class="title">
      Awesome framework
    </div>
      <ons-list>
        <ons-list-header>Bindings</ons-list-header>
        <ons-list-item>Vue</ons-list-item>
        <ons-list-item>Angular</ons-list-item>
        <ons-list-item>React</ons-list-item>
      </ons-list>
  </ons-card>
</ons-page>
    0
    A
     1 Reply
  • A

    @mcombatti I apologise for a reply that is 2 & 1/2 years late (!) but I am only now revisiting this stage of this project and found that you replied, and not only that but it works! (with some minor code edits). Thanks very much.

    For anyone else looking, the working code is below BUT you need to edit the two img src URLs to remove the ![bighd.jpg]( immediately before the https:// and the final ) which is after the ); in the first URL and after the " in the second URL (the text editor for this forum adds these extra bits into the URLs when you hilight it as source code). If you then paste it into the playground it works https://onsen.io/playground/

    <style>
#bg1 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%; 
background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");)
}
</style>

<ons-page id="myPage">
<ons-toolbar style="height: 120px;" id="MainToolbar">
	<div class="left" id="MainToolbar_leftDiv">
		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
	</div>
</ons-toolbar>
<div id="hiddenspace" style="height: 72px;">
</div>
<ons-card>
    <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%">
    <div class="title">
      Awesome framework
    </div>
      <ons-list>
        <ons-list-header>Bindings</ons-list-header>
        <ons-list-item>Vue</ons-list-item>
        <ons-list-item>Angular</ons-list-item>
        <ons-list-item>React</ons-list-item>
      </ons-list>
  </ons-card>
</ons-page>
    0