moving text while keeping background-image in CSS

17,119

Use a negative top margin.

.menu_main ul {margin-top:-50px;}

Share:
17,119
Ori
Author by

Ori

going to school for cpsc and math.

Updated on June 04, 2022

Comments

  • Ori
    Ori almost 2 years

    I have a 'main_menu' div which contains a background-image that is repeating on the y-axis. Above this div I have another div which is used for a header. The problem is that the header div has an image which is about 75px in height. I would like to start the text in main_div about 50 px higher from where main_div's background-image actually starts.

    I was thinking of something like:

    position:absolute; top:-50px;
    

    This doesn't really work. The question is how do I move the text up, while keeping the background-image at the normal spot.

    Thanks

    {EDIT}

    Here's the CSS

    .menu_main
    {
    background-image:url('../menu_main.jpg');
    background-repeat:repeat-y;
    width:173px;
    padding:5px;    
    
    }
    .menu_header
    {
    background-image:url('../menu_header.jpg');
    text-align:center;
    width:173px;
    height:65px;
    padding:5px;    
    }
    

    This is the html

    <div class="menu_header">Some Header</div>
    <div class="menu_main">
        <ul>
            <li>Educational Objective</li>
            <li>Projects</li>
            <li>Class Preparation</li>
            <li>Testimonials</li>
        </ul>
    </div>  
    

    So as you can see the header is pretty tall. So I'd like to start the text in the menu_main div about 50px higher up