CODEWITHSUNDEEP
csshtmlpositioningbackground-image
Ori
Ori

Reputation: 5081

moving text while keeping background-image in CSS

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.

I was thinking of something like:

position:absolute; top:-50px;

This doesn't really work. The question is how do I move the text up, while keeping the background-image at the normal spot.

Thanks

{EDIT}

Here's the 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 the 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 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

Upvotes: 3

Views: 18598

Answers (4)

Deed
Deed

Reputation: 3

But you can move the background down (for example by 5 pixels):

background-position: top 5px;

Upvotes: 0

Emily
Emily

Reputation: 10088

Use a negative top margin.

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

Upvotes: 3

hyperslug
hyperslug

Reputation: 3623

You could style your UL specifically:

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

and

<ul class="nav">
...

Or perhaps put the UL in another DIV class="nav".

Upvotes: 0

Darko
Darko

Reputation: 38860

You could move it like you were doing with absolute positioning and move the background down like so:

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

this will move your bg image so it starts 50px down.

I might be able to help more if you provide a screenshot or more code or a live example...

Upvotes: 0

Related Questions