divs with vertical line - html

Question

I need help about this image. How can I set it up in css and in html thank you in advance if anyone will give time to help me.

Answer 1

What I would recommend is to consider the image to be a background of one element. Then create a child of that element that only occupies the left-hand half of the image. In order to achieve this, the child needs the following styles:
#child {
position: relative; /* To position the border in relation to the image parent */
width: calc(50% - 2px); /* 2px correlates to the width of the border */
height: 100%; /* To occupy the full height of the image */
}
Now the the element is invisibly sitting on the left-hand half of the image, you can apply a border to the right-hand side of this element with border-right: 2px solid cyan.
This results in a line halfway through the image, as can be seen in the following:
#container {
width: 300px;
height: 200px;
background: url(http://placehold.it/100);
}
#child {
position: relative;
width: calc(50% - 2px);
height: 100%;
border-right: 2px solid cyan;
}
<div id="container">
<div id="child"></div>
</div>
Hope this helps! :)

Answer 2

Obisidians answer is good....I'm going to tweak it slightly be removing an HTML element and using :before, keeping the background image, but treating the line a little differently
#container {
width: 300px;
height: 200px;
background: url(http:/fillmurray.com/300/200);
position:relative;
}
#container::before {
position: absolute;
left: calc(50% - 1px);
width:2px;
height: 100%;
background-color:cyan;
content: '';
}
#container > div
{
background-color: rgba(255,255,255,0.5);
padding: 5px;
}
<div id="container">
<div>Some Content</div>
</div>
This way you have more freedom of the child contents