Make a grandchild element have the grandfather element content as background - html

Question

I have an outer div, that has two divs.
One div works as a background and has a background image, and other one works as the content and has a background color of #fff, the one that works as a content has a title and an input.
I was trying make a border for my input , that shows what is behind the content div.
Because the proportions of the the background div changes on hover(on pupose), changing the way the border of the input should look.
So i decided to have a div as the border of the input.
But i have been stuck on trying to make the border to show what is behind the content div.
Here is the code:
#chat_bi{
position: absolute;
left: 0;
top:0;
background-repeat: no-repeat;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
background-size: cover;
z-index: -1;
filter: brightness(60%);
height: 100%;
width: 100%;
transition: 0.5s;
}
#outer_div_chat{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: calc(100% - 400px);
padding: 50px;
}
.chat{
padding: 15px;
z-index: 2;
box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
background-color: #fff;
}
#outer_div_chat:hover #chat_bi{
width: 105% !important;
height: 105% !important;
filter: brightness(95%);
}
#start_up_chat_div{
display: flex;
flex-direction: column;
}
/*text-input*/
.text_input_div{
padding:5px;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
}
.text_input{
outline:none;
padding:2px 4px;
border:none;
width: 100%;
box-sizing: border-box;
}
<div style="height:625px; overflow:hidden;">
<div id="outer_div_chat">
<div id="chat_bi"></div>
<div class="chat">
<div id="start_up_chat_div" >
<span style="padding-bottom: 10px;">Random text</span>
<div class="text_input_div">
<input type="text" class="text_input">
</div>
</div>
</div>
</div>
</div>
I kind of guess that one solution is applying, the same background to the border of the input div, in the same position, and size, but i was wondering if there is another way around, a more proper way around.

Answer 1

You can try something like this:
CSS
.bigcrazydivwithbackground {
background: url('https://images.pexels.com/photos/28477/pexels-photo-28477.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');
}
.crazytitle {
background: white;
padding: 10px;
}
.crazyinner {
border: 20px solid white;
}
.crazyinputwrapper {
margin: 20px;
}
input {
display: block;
width: 100%;
background: white;
line-height: 20px;
border: none;
}
HTML
<div class="bigcrazydivwithbackground">
<div class="crazybox">
<div class="crazytitle">
Title
</div>
<div class="crazyinner">
<div class="crazyinputwrapper">
<input type="text" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/hLphc3nu/

Answer 2

Maybe instead of position: absolute and position: relative, make them both position:absolute so the z-index's will work. Sometimes using a negative z-index might also be the problem.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.