Moving text while saving background image in CSS

I have a div 'main_menu' that contains a background image that repeats along the y axis. Above this div, I have another div that is used for the title. The problem is that there is an image 75 pixels high in the div header. I would like to start the text in main_div about 50 pixels above where the main_div initial image starts from.

I was thinking of something like:

position:absolute; top:-50px;

This does not work. The question is how to move the text up while keeping the background image in a normal place.

thanks

{EDIT}

Here is 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 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 you can see that the title is pretty tall. So I would like to start the text in the menu_main div about 50 pixels higher

+3
4

.

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

+3

, , :

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

bg, 50 .

, ...

0

UL :

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

<ul class="nav">
...

, , UL DIV class= "nav".

0

(, 5 ):

background-position: top 5px;
0

Source: https://habr.com/ru/post/1712530/


All Articles