Just realised this got answered in my original post two and a half years ago (!), see here: https://community.onsen.io/post/10416

@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>

I want to achieve this in Onsen UI:

Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.

I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).

The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn’t show at all. I also tried doing the same thing on the within the toolbar and that didn’t go full width and not sure the burger icon would have been on top anyway

Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I’ve looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can’t see how to modify it correctly

Ideally need this to be able to cope with different device widths or portrait/landscape orientation.

Any suggestions much appreciated. Thanks.

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:

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