Cant get wrapper div right - html

Question

I want a div with some text in it.
In that div I also want a div that matches the same position and proportion.
I found multiple things on stackoverflow but as soon as on thing is different it doesn't work for me.
Right now, I can't see the text anymore. Why?
It would be great if the solution doesn't affect the css for '#container'.
html:
<div id="container">
<p>Somt text to screw with me</p>
<div class="background-img"></div>
</div>
css:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
}
for the fiddlers:
https://jsfiddle.net/clankill3r/8kaLj2su/

Answer 1

Add z-index: -1 to your background image.
https://jsfiddle.net/8kaLj2su/2/

Answer 2

A proper way to do it would be Don't use z-index at all
Change the logical order of your elements:
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
And than simply set your p to relative:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
position:relative;
}
.background-img {
position: absolute;
background: url(http://lorempixel.com/420/255) 50% / cover;
width: 100%;
height: 100%;
}
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>

Answer 3

Use z-index to select which element overlays the other.
Working example:
(JSFiddle)
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
z-index:2;
position:relative;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
z-index:1;
}
<div id="container">
<p>Somt text to screw with me</p>
<div class="background-img"></div>
</div>

Answer 4

p {
color: blue;
z-index:1;
position:relative;
}
Basically Z-index:1 will push the text on top and Position is necessary for z-index to work in most cases. I would not suggest -1 as incase if you have any text for that div it may be hidden too.

Answer 5

If you want to see your background image with text:
https://jsfiddle.net/xeyw0hvc/
Code:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
z-index:10;
}
p {
color: blue;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://lorempixel.com/420/255');
z-index:-1;
}

Answer 6

p {
color: blue;
z-index: 9999;
}

Answer 7

Using z-index, like others have suggested is fine. But I have found z-indexing to be a bit buggy, especially on legacy browsers such as older versions of IE. I would approach this differently. Change the order of your markup, make the parent container position:relative, then make both of the child elements position:absolute. That way you avoid using z-index altogether.
Like so: https://jsfiddle.net/4x5nkwgb/
HTML
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
CSS
#container {
position: relative;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
position:absolute;
top:0;
left:0;
display:block;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
}