testo in movimento mentre il background-image tenendo in CSS

Question

Ho un 'MAIN_MENU' div che contiene un'immagine di sfondo che si ripete sul y. Sopra questo div ho un altro div che viene utilizzato per un colpo di testa. Il problema è che il div intestazione ha un'immagine che è di circa 75 pixel in altezza. Vorrei iniziare il testo in main_div circa 50 px superiore dal punto in cui l'immagine di background-main_div inizia effettivamente.

Stavo pensando a qualcosa di simile:

position:absolute; top:-50px;

Questo in realtà non funziona. La domanda è: come faccio a spostare il testo su, mantenendo il background-image nel punto normale.

Grazie

{EDIT}

Ecco il 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;    
}

Questo è il codice 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>  

Quindi, come si può vedere l'intestazione è abbastanza alto. Così mi piacerebbe iniziare il testo nel div MENU_MAIN circa 50px più in alto

Answer 1

Usa un margine superiore negativo.

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

Answer 2

Si potrebbe spostarlo come se stessi facendo con posizionamento assoluto e spostare lo sfondo verso il basso in questo modo:

background:url(someimage.png) repeat-y left 50px;

questo si muoverà la vostra immagine bg in modo che inizia 50px verso il basso.

potrei essere in grado di aiutare di più se si fornisce uno screenshot o più codice o un esempio dal vivo ...

Answer 3

Si potrebbe acconciare i vostri UL in particolare:

.nav
{
  position: relative;
  top: -50px;
}

e

<ul class="nav">
...

O forse mettere la UL in un'altra classe DIV = "nav".

Answer 4

Ma è possibile spostare il fondo verso il basso (per esempio 5 pixel):

background-position: top 5px;