How do I layer an image behind a <div>? - html

Question

I've been trying to make a square image that is layered behind a <div>. For my website, I'm trying to make it look similar to an album with a CD popping out from the slip, but every attempt I've done to make the image square, layered behind and the same size as the <div> seems to not work. It's either on top, or it's overflowing to the bottom of the page.
Here's the HTML I did:
<div class="container">
<div id="navbar">
<div id="nav">
<div>
<i class="fa fa-home" aria-hidden="true"></i>Home
</div>
<div>
<i class="fa fa-address-book" aria-hidden="true"></i>About
</div>
<div>
<i class="fa fa-book" aria-hidden="true"></i>Work
</div>
<div>
<i class="fa fa-question-circle" aria-hidden="true"></i>Extras
</div>
</div>
</div>
<iframe src="home.html" title="Webpage" id="content" name="content"></iframe>
</div>
</div>
<div class="disk">
<img src="/images/cd.svg">
</div>
And the CSS:
:root { /* to get the color just type var(--color) */
--color1:#150F0F; /*DARKEST*/
--color2:#221918;
--color3:#2C221F;
--color4:#423229;
--color5:#58493D;
--color6:#8D7357;
--color7:#BCAA9B;
--color8:#BCAA9B;
--color9:#F5DEAD;
--color10:#FFF9BC; /*BRIGHTEST*/
--border-size:3px;
}
.container {
min-height: 50vh;
width: 70%;
margin: auto;
margin-left:10%;
display: grid;
grid-template-columns: minmax(2vw, 260px) auto;
background-color: var(--color9);
border: 0px;
border-style: solid;
border-top-width: var(--border-size);
border-bottom-width: var(--border-size);
border-color: var(--color10);
z-index: 69;
}
#navbar {
height: auto;
width: auto;
padding: 10%;
float: left;
background-color: var(--color7);
font-family: PopMagic;
font-size: clamp(15px, 4vw, 30px);
}
#content {
height: 100%;
width: 100%;
border:none;
}
.disk {
min-height: 50vh;
max-width: 85%;
margin: auto;
margin-left:10%;
margin-top: -50vh;
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.disk img {
min-height: 50vh;
position: absolute;
}
The site I'm using this on can be found here.

Answer 1

As you may expect there are as many approaches as developers.
You should consider how your layout is constructed at the moment because there is simply not enough space for your disc element.
If I were you I would get rid the following div
<div class="disk">
<img src="/images/cd.svg">
</div>
and try to use ::after psuedo-element instead.
...
.container {
border: none;
position: relative;
padding: 0 160px 0 0;
background-color: #0000;
::after {
right: 0;
content: '';
width: 160px;
height: 100%;
position: absolute;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-image: url(/images/cd.svg);
}
}
...
Please don't expect the final solution here but take above code as a bunch of clues which may help to solve your problem.