перемещение текста с сохранением фонового изображения в CSS

Question

У меня есть div 'main_menu', который содержит фоновое изображение, повторяющееся по оси y.Над этим div у меня есть другой div, который используется для заголовка.Проблема в том, что заголовок div содержит изображение высотой около 75 пикселей.Я хотел бы начать текст в main_div примерно на 50 пикселей выше того места, где фактически начинается фоновое изображение main_div.

Я думал о чем-то вроде:

position:absolute; top:-50px;

На самом деле это не работает.Вопрос в том, как мне переместить текст вверх, сохраняя при этом фоновое изображение в обычном месте.

Спасибо

{РЕДАКТИРОВАТЬ}

Вот 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;    
}

Это 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>  

Итак, как вы можете видеть, заголовок довольно высокий.Итак, я хотел бы запустить текст в menu_main div примерно на 50 пикселей выше

Answer 1

Используйте отрицательное верхнее поле.

.menu_main ul {верхнее поле:-50 пикселей;}

Answer 2

Вы могли бы переместить его, как вы делали с абсолютным позиционированием, и переместить фон вниз вот так:

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

это переместит ваше изображение bg таким образом, чтобы оно уменьшилось на 50 пикселей.

Возможно, я смогу помочь больше, если вы предоставите скриншот, или больше кода, или живой пример...

Answer 3

Вы могли бы оформить свой UL особым образом:

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

и

<ul class="nav">
...

Или, возможно, поместите UL в другой DIV class="nav".

Answer 4

Но вы можете переместить фон вниз (например, на 5 пикселей).:

background-position: top 5px;