Make menu background-image consistant over all views and pages

Hi and thanks for the great Sydney theme.
I concider going lifetime but am in quite early state of adopting my corporate design to sydney and have hit a consistancy problem.

My logo has a bar integrated like that:
logo

To accomplish i thought i could just set a green and partly transparent png as background-image of .site-header.float-header and turn down opacity on background-color:

.site-header.float-header {
  background-image: url("wp-content/uploads/background.png") !important;
  background-color: rgba(255,255,255,0) !important;
}

But the background-image does only show on start/slider page and is missing on the site pages with fixed menu.
I tried to asign to .site-header.fixed.float-header but no success.
Site is located at mosushi.net/wp/

Also when the view collapses at 1024 px, the height of the menubar increases but i would like to keep the background-image in same line with the logo as it does on slider/start page.

Lastly, the green/transparent png would also be nice as menu background in mobile view.

How to set the bg image consistant over all views?
Thanks in advance for your hints, i have already taken much advantage of this forum but did not find a fitting answer when searching.

Hello there,

It happen due to relative image URL in your CSS code is only recognized in homepage. You should use absolute URL instead.


.site-header.float-header {
  background-image: url("http://mosushi.net/wp/wp-content/uploads/background.png") !important;
  background-color: rgba(255,255,255,0) !important;
}

Regards,
Kharis

Thank you very much Kharis, very helpfull!
That surely worked after a little facepalm :smiley:

I will have some more questions but i guess i should open seperate questions for them?

Or would you answer on “asign bg-image to mobile view menu” and “same logo pixel size on all views” here also as it would match my original broader question to have the menubar consistant in all views?

Or should i change title of this question to sth. like “Background image does only show on slider page” to better match your answer?

Thank you very much again for your time!

Ok i managed to have fixed logo size over all views by doing

#masthead .col-md-4.col-sm-8.col-xs-12{
    height: 87.12px;
	width: 390px;
}

and keeping the menu left aligned and lowering width to not “push away” the logo when resizing screen.

#masthead .col-md-8.col-sm-4.col-xs-12{
    height: 75px; /* to vertical fix menu */
    width: 31%; /* to not interfere with logo div on left */
}

will further look into having mobile view menu background image in similar appearence.