نقل النص أثناء حفظ صورة الخلفية في CSS

Question

لدي DIV 'main_menu' الذي يحتوي على صورة خلفية تكرر على المحور y. فوق هذا 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 حوالي 50PX أعلى

Answer 1

استخدام هامش أعلى سلبي.

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

Answer 2

يمكنك تحريكها كما كنت تفعل مع تحديد المواقع المطلقة ونقل الخلفية إلى أسفل مثل:

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

سيؤدي ذلك إلى تحريك صورة BG الخاصة بك بحيث يبدأ 50px أسفل.

قد أكون قادرا على المساعدة إذا قمت بتوفير لقطة شاشة أو مزيد من التعليمات البرمجية أو مثالا مباشرا ...

Answer 3

يمكنك أن تسمي ul الخاص بك على وجه التحديد:

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

و

<ul class="nav">
...

أو ربما وضع UL في فئة DIV أخرى = "NAV".

Answer 4

ولكن يمكنك نقل الخلفية إلى أسفل (على سبيل المثال 5 بكسل):

background-position: top 5px;