CODEWITHSUNDEEP
htmlcssz-index
Nicholas Francis
Nicholas Francis

Reputation: 3693

z-index to a background? CSS

I have couple of list items with specified height and width with a background which has borders with middle portions being transparent. each li contains an image.

<ul id="reel">
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
    <li><img src="movie-image"></li>
</ul>

CSS:

#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; }
#reel li img { z-index:98; }

I want the background of the li to appear over the image. z-index, didn't do the trick for me. any suggestion?

Upvotes: 4

Views: 246

Answers (4)

ffffranklin
ffffranklin

Reputation: 329

Try a pseudo element. This presumes the image is 100px by 100px

li {               
    display:block;
    position:relative;
    height:100px;
    width:100px;
}

li:after {
    content:"";
    width:100px;
    height:100px;
    background-color:#000;
    display:inline-block;
    position:absolute;
    left:0;
    top:0;
    background: rgba(0, 0, 0, 0.6);
}

Upvotes: 2

Srinivasan Annamalai
Srinivasan Annamalai

Reputation: 369

I suggest making the li image with a position absolute and a value of x and y in minus 100 or more as you need it to keep the li image away so that the background image shows up. Something like below:

#reel li { width:320px; height:327px; z-index:100; }
#reel li img { position:absolute; left: -100px; top: -100px; }

Upvotes: 3

Harsha M V
Harsha M V

Reputation: 54949

Nicolas,

I think what your trying to do is wrong in code.

Try something like this http://pastebin.com/7AnSxcEh

Give the same height and width to the li and the div. Also add a positioning. so that you can stack up the order.

Upvotes: 1

Nicholas Francis
Nicholas Francis

Reputation: 3693

Well I seem to found the solution for this problem, 

#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; position:relative;  }
#reel li img { position:absolute; z-index:98; }

Thank you @adrian

Upvotes: 0

Related Questions