title: moving text while keeping background-image in CSS
body: <p>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.</p>
  
  <p>I was thinking of something like:</p>
  
  <pre><code>position:absolute; top:-50px;
  </code></pre>
  
  <p>This doesn't really work.
  The question is how do I move the text up, while keeping the background-image at the normal spot.</p>
  
  <p>Thanks</p>
  
  <p>{EDIT}</p>
  
  <p>Here's the CSS</p>
  
  <pre><code>.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;    
  }
  </code></pre>
  
  <p>This is the html</p>
  
  <pre><code>&lt;div class="menu_header"&gt;Some Header&lt;/div&gt;
  &lt;div class="menu_main"&gt;
      &lt;ul&gt;
          &lt;li&gt;Educational Objective&lt;/li&gt;
          &lt;li&gt;Projects&lt;/li&gt;
          &lt;li&gt;Class Preparation&lt;/li&gt;
          &lt;li&gt;Testimonials&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>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</p>