CODEWITHSUNDEEP
cssmenu
RunnicFusion
RunnicFusion

Reputation: 193

Menu image above background

I am trying to place a image above my menu background.

I have tried list-style-image and background image (on li and a tag). How do I do this? Image with the menu: image from menu

orange background: this is the background of the menu (the a tag)

gray box: This is the image I want above my menu backround. (the 'A' is where the menu background is.

    #nav ul li{
    font-weight: bold;
    float: left;
    margin-top: -5px;
    position: relative;
    padding: 6px 5px 0 15px;
    z-index: 99;
    height: 50px;
    background-position:left center;
    background-image: url(../images/bussel/menu-blad1.png) !important;
    background-repeat: no-repeat;

}
#nav ul li a{
    background-color: #feb24e;
    display: block;
    width: 153px;
    height: 35px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    position: relative;
    z-index: 98;
}

Upvotes: 0

Views: 238

Answers (4)

RunnicFusion
RunnicFusion

Reputation: 193

I've done this (the div way):

The link:

<li><span class="blad"></span><a href="#">Groepen</a></li>

The css:

    #nav ul li{
    font-weight: bold;
    float: left;
    margin-top: -5px;
    margin-right: 5px;
    position: relative;
    padding: 6px 5px 0 15px;
    z-index: 99;
    height: 50px;
    }

    #nav ul li a{
    background-color: #feb24e;
    display: block;
    width: 153px;
    height: 35px;
    color: #fff;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    }

    #nav ul li span.blad{
    width: 35px;
    height: 43px;
    background-position:left center;
    background-image: url(../images/bussel/menu-blad.png);
    background-repeat: no-repeat;   
    float: left;
    margin: 4px 5px 0px -15px;
    }

So it works, thanks!

Upvotes: 1

QArea
QArea

Reputation: 4981

u can try this

a{
position:absolute;
background:red;
width:10px;
height:10px;
}
li{
position:relative;
bacground:url(../);
padding:20px;
}

Upvotes: 0

Flowen
Flowen

Reputation: 395

Use z-index

Example:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> ONE </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> TWO </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> THREE </div>
</div>

The second div would be in the front, and the first div on the background.

Upvotes: 0

Fallup
Fallup

Reputation: 2427

Can you go with something like this ? (roughly) : jsFiddle demo

Just create another div with float:left and give it correct margin. Then you can place your image inside this floated div.

Upvotes: 0

Related Questions