CODEWITHSUNDEEP
htmlcssimage
Sean Anderson
Sean Anderson

Reputation: 29251

Overlay list item elements ontop of an image inside of a ul without setting ul's background-image

http://jsfiddle.net/MBNZ8/32/

I'm trying to emulate the effect of setting a ul's background-image while using an actual image. I need to do this because my requirement necessitates printing the ul's image without requiring users to configure their browser. Many browsers do not support printing background-images without configuration.

I've taken a stab at doing so, but I suspect my implementation is invalid markup:

<ul>
    <img height="100" width="30" src="http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg"></img>    
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
    height: 100px;
    width: 30px;
    list-style: none;
    margin: 0;
    padding:0;
}

ul img {
    position: absolute;
    z-index: 1;
}

ul li {
    z-index: 99;
    color: red;
}

My list items do not currently appear over the image even though the have a higher z-index.

What's the proper way of doing this? Do I just declare the image outside of the ul and try to position my ul over it?

Upvotes: 1

Views: 1069

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240878

A z-index only works on positioned elements.. You could add postition:relative to ul li.

jsFiddle demo

ul li {
    position:relative;
    z-index: 99;
    color: red;
}

See MDN

Upvotes: 2

Related Questions