Jquery add div with background behind text element

Question

I want to place an absolute positioned div behind text some text or images. The reason I can't set the absolute div z-index to -1 is because there is content behind the text or images with background images. So the absolute div will be positioned behind that.

I am familiar with Javascript, jQuery, css etc. So what could I do to position the absolute div behind the text but in front of the background images?

Thanks!

Answer 1

Like this maybe?

.div-1 { background-image:url(my-image.jpg) no-repeat 0 0; position:relative; }
.div-2 { position:absolute; z-index:1; top:0 left:0; }
.div-3 { position:absolute; z-index:2; top:0 left:0; }

<div class="div-1">
 <div class="div-2">behind</div>
 <div class="div-3">in front</div>
</div>

Answer 2

与其将带有背景图像的div的z-index设置为-1，而是创建一个包含图像/文本的div并将其z-index设置为1。