How to get navigation bar on the banner?

Question

I would like the navigation bar to be on the banner? Is this possible. I have been doing the following css to try to achieve and it works but it goes beyond the scope of the wrapper. Here are the following css:

 .navbar-buttons{
    padding-top:10px;
    padding-right:20px;
    text-align:right;
    list-style:none;
    margin:0 auto;
    overflow:hidden;
    <!---I commented it out because like I mentioned above, goes out of scope--->
    <!---background-image: url(./img/Intranet_Banner.jpg);--->
    width:100%;
}

#wrapper {
    width: 940px;
    height:100%;
    margin: 0 auto;
 }

Following is html page navpage:

<div id="wrapper">

<!-- content-wrap starts here -->
<div id="content-wrapper">      

    <img src="img/Banner.jpg" alt="Banner" class="no-border img-banner" />

            <!-- Menu Tabs -->
        <ul>
            <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:blue !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a></li>

        </ul>
</div>

Answer 1

You can use the background-image property to set a background-image on #content-wrapper , instead of trying to move your list on top of the .image.

I made a few adjustments to your code:

 .navbar-buttons { padding-top: 10px; padding-right: 20px; list-style: none; margin: 0 auto; overflow: hidden; width: 100%; } #content-wrapper { background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/93/Long_sky_background_%2B_PAN.jpg'); } #wrapper { width: 940px; height: 100%; margin: 0 auto; } a { color: white; } 

 <div id="wrapper"> <!-- content-wrap starts here --> <div id="content-wrapper"> <!-- Menu Tabs --> <ul> <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a> </li> </ul> </div> </div> 

View on JSFiddle