Navigation bar masking

What I want to achieve here, is to transparent navigation bar hide anything underneath and leave background only. So if you scroll down the page anything that goes under fixed navbar will be hidden. I've googled it but didn't found any satisfying results. Is it even possible?

Here's the demo site: http://klaunfizia.pl/damian/ Style: http://klaunfizia.pl/damian/style.css

what I got now: https://i.sstatic.net/ThkzM.jpg What I want to achieve: https://i.sstatic.net/n68Om.jpg

Background image isn't solid, so setting navigation bar color to #ff7400 won't be a solution.

code:

        <ul id="menu">
            <li>
                <a href="#">
                    &nbsp; Home &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; About me &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; Portfolio &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; Contact &nbsp;
                </a>
            </li>

        </ul>
    </nav>

<section id="container">
    <section id="main">
        <h1>hi! My name is Damian</h1>
        <p class="mainText">
            I'm a graphic designer from Poland specializing in web design, 3D modeling, vector graphics and digital drawing. See my portfolio for more information.
        </p>
    </section>
</section>

css:

#navbar
 {
    height: 80px;
    width: 100%;
    position: fixed;
    -webkit-transform: translateZ(0);
    z-index: 10;
    top:0;
  }

Solution

Why can't you set the same background color and image as the body?

#navbar {
    background: url(images/background.jpg) #ff7400;
}

Works just dandy in Chrome dev tools.