Can't get the picture to be in the background - html

Question

I've been trying to get a background picture to actually be in the back and not in the front.
I've tried with z-index, positioning en making divs in divs. But nothing really worked out.
The Screenshot of the issue.:
https://gyazo.com/4e9ae692ce1280ba8ea0ec37cb54930b
The above picture needs to be in the background so the box thing can go up in front.
The HTML code:
<div id="image">
<img src="DSC_0043.png" width="800" height="800">
<div id="content">
<div id="tabbox">-
<div class="tab">
Here follows like the actual content, which you of course don't need to know. it's just a bunch of text etc.
The CSS code:
#image{
position: relative;
z-index: 2;
}
#content{
width: 75%;
background-color: black;
position: absolute;
margin-left: 12.5%;
padding-bottom: 5.5%;
z-index: 1;
}

Answer 1

Using pure CSS, you can implement a background image even without a separate img tag.
Try using background-image:
#content {
/* Your CSS here... */
background-image: url("DSC_0043.png"),
}
EDIT:
If you want to repeat that image, you can specify background-repeat:
#content {
background-image: url("DSC_0043.png"),
background-repeat: repeat, /* Put no-repeat for non-repeating image */
}

Answer 2

if you want that image goes behind everything else, you should try with background-size: cover;
I didn't understand your problem very well, I hope that this will help you.

Answer 3

A slight rework of your code, you can accomplish this with css.
I used an image from google to show this but to explain I have two divs nested.
The parent div content sets the background image and adjusts the positioning of itself.
The child div box has the text and it's own width and height.
The css background-image: url ("path/to/image") and background-repeat: no-repeat make this possible. Feel free to manipulate the example I gave to add to your understanding.
#content {
width: 100%;
height: 100%;
background-image: url('https://images-na.ssl-images-amazon.com/images/I/61xo5qJF0nL._SY355_.jpg');
background-repeat: no-repeat;
position: absolute;
margin-left: 12.5%;
padding-bottom: 5.5%;
z-index: 1;
}
#box{
width: 350px;
height: 150px;
color: purple;
}
<div id="content">
<div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan turpis diam, non dictum dui mollis eu. Aliquam erat volutpat. Phasellus faucibus bibendum felis a posuere. Maecenas sit amet neque a sem mattis ornare sed vel mauris. Mauris vel semper nisl. Aliquam erat volutpat. Suspendisse potenti. Proin vulputate bibendum nulla, sit amet placerat arcu viverra in. Duis ultricies risus quis venenatis hendrerit. Sed elit lorem, suscipit at odio in, mollis dignissim dolor. Nulla a sem nec dolor consequat sodales. Nullam risus velit, venenatis nec quam in, tincidunt maximus velit. Cras lacus ex, pellentesque vel sapien quis, condimentum vulputate sapien. Maecenas at pellentesque lacus. Mauris ac ligula quam. Integer leo est, vulputate sed pulvinar ut, consequat vel risus.
Phasellus lectus neque, rutrum sit amet nisi eget, imperdiet scelerisque mauris. Nam elementum pretium sem ut sollicitudin. Cras in finibus eros. Aliquam sit amet metus vitae tellus vehicula pretium. Etiam vestibulum congue luctus. In quis auctor mi, sit amet tempor metus. Sed ex massa, porta a magna et, molestie vestibulum ipsum.
Sed congue, ligula non fringilla scelerisque, risus massa fermentum tortor, ornare feugiat justo massa molestie nisi. Ut id efficitur lacus. Duis ullamcorper mi nec tristique fermentum. Donec pellentesque vel massa et commodo. Integer semper gravida vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris at urna hendrerit, blandit ligula nec, dapibus erat. Aliquam ullamcorper orci nec quam euismod, sed mollis purus volutpat.
Proin at velit ut nunc mattis sodales a id ante. Aliquam a lacinia odio. Vivamus vel vulputate magna. Duis iaculis scelerisque tincidunt. Sed cursus leo vitae libero efficitur venenatis. Fusce suscipit dui nibh, nec tristique sem sodales ut. Quisque ac blandit lorem, pretium ullamcorper orci. Vivamus posuere ligula neque, at laoreet nibh semper consectetur. Duis suscipit sollicitudin quam sed volutpat. Proin tellus neque, porta id rutrum nec, posuere at nibh. Fusce venenatis efficitur metus, quis feugiat metus imperdiet et.
Sed aliquam viverra finibus. Vestibulum gravida a tortor et tempus. Aliquam at tortor purus. Maecenas malesuada magna justo. Aenean elementum sagittis aliquam. Donec lobortis id orci id pharetra. In non purus vitae erat fermentum condimentum non nec metus.</div>
</div>