0

Can't make it work. I need to put some images on page and then put some default image on every image that I've put before. Here I put some images on page:

tmp = 0;
for(var a = 1; a <= get_height; a++){
    for(var b = 1; b <= get_width; b++){
        document.write("<img src=" + shuffled_mass[tmp] + "class='image'>");
tmp++;
    }
    document.write('\n');
}

It works fine. But I can't put default image on top of those. Tried to do it with css:

.image {
position:relative;
z-index: 1;
}
.image:after {
    z-index: 3;
    background-image: url('/static/test_app/image/default.png');
    height:96px;
    width:96px;
    display:block;
    content: ' ';
    position:absolute;
    left:0;
    top:0;
}

But that didn't work. Could someone, please, help me with this?

Dexa
  • 99
  • 1
  • 11

1 Answers1

0

You can't use :after on image. See this question: Why don't :before and :after pseudo elements work with `img` elements?

You have to wrap the image with element (let's say div) and use :before on it.

.image {
    display:block;
}

.wrapper {
    display:inline-block;
    position:relative;
}

.wrapper:after {
    z-index: 3;
    background-image: url('/static/test_app/image/default.png');
    height:96px;
    width:96px;
    display:block;
    content: ' ';
    position:absolute;
    left:0;
    top:0;
}
Community
  • 1
  • 1
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • Edited the question. I put images on page with js document.write(""); and there I give all images class="image". Can understand how to make it work with your advice. – Dexa Dec 01 '15 at 14:47
  • Just replace `document.write("");` to `document.write("
    ");` (You can remove the `.image` class attribute, you don't need it.     – Mosh Feu Dec 01 '15 at 14:50
  • That didn't work. Just place all images not in line, as it was befor, but in colomn – Dexa Dec 01 '15 at 15:22
  • Can you post a image with the result? I can't understand what do you mean. – Mosh Feu Dec 01 '15 at 15:39