Question

I need to move the image below the blue navigation bar down so that it connects with the main body of content below (They are supposed to create the appears of a shaded box around the webpage’s content).Below is the HTML for the page. The image I am trying to move down it boy_top.png. Does anyone know how to do this? I have also included the CSS for the “main” “page” and “menu” sections. The blue navigation area is attached to the “menu” section, the main content area to the “main” section, and they are all encapsulated in the “page” css.

    <div class="page">
        <header>            
        <div style="margin: 20px;">
@*                <a href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@
            <span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
            <span style="color: white; font-size: 18px; ">&nbsp;&nbsp; </span>
        </div>
@*            </a>*@
@*            <div id="logindisplay">
            @Html.Partial("_LogOnPartial")
        </div>*@
            <nav>
                <ul id="menu">
                    <li>@Html.MenuLink("Agents", "Index", "Agent")</li>
                    <li>@Html.MenuLink("Products", "Index", "Product")</li>
                    <li>@Html.MenuLink("Product Training", "Index", "Course")</li>
                    <li>@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
                    <li>@Html.MenuLink("Help", "About", "Home")</li>
                </ul>
            </nav>
    </header> 
    <img src="../../Content/images/body_top.png"  id="topPic" alt="tag"/>       
        <section id="main">            
        @RenderBody()
    </section>
    <footer>
        <span style="color: Gray;"> Copyright © 2012 Symetra Life Insurance Company. All rights reserved. Symetra® is a registered service mark of Symetra Life Insurance Company. For Internal Use Only. </span>
    </footer>
    </div>

CSS

    #main 
    {
        background-image: url('../../Content/Images/body_rpt.png');
        background-repeat: repeat-y;
        clear: both;  /*add this so tabs go left! */
        padding: 15px 15px 15px 30px; /*30px 30px 15px 30px; */
        background-color: #fff;
        /*border-radius: 4px 0 0 0;*/
        -webkit-border-radius: 4px 0 0 0;
        -moz-border-radius: 4px 0 0 0;
    }

    .page {
        width: 83.7em;
        margin-left: auto;
        margin-right: auto;
    }

    ul#menu {
        /*border-bottom: 1px #5C87B2 solid;*/
        background-image: url('../../Content/Images/Nav-Background.gif');
        padding: 0 0 2px;
        position: relative;
        margin: 0;
        text-align: right;
    }

    ul#menu li {
        display: inline;
        list-style: none;
    }

    ul#menu li#greeting {
        padding: 10px 20px;
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        color: #fff;
    }

    ul#menu li a {
        padding: 10px 20px;
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        /*background-color: #e8eef4;*/
        color: Navy; /*#034af3; */
        border-radius: 4px 4px 0 0;
        -webkit-border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
    }

    /*ul#menu li a:hover {
        background-color: #fff;
        text-decoration: none;
    }*/

    ul#menu li a:active {
        background-color: #a6e2a6;
        text-decoration: none;
    }

    ul#menu li.selected a {
        background-color: #fff;
        color: #000;
    }
    /* this one is for the active tab  */
    .current 
    {
        font-size: 120%;
        font-weight: bold;
        border-style: double;
    }

Answer 1

Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;

If you can’t put the image inside the main body, then add a negative margin-top to the main body. It’s a bit “hacky” but still valid.