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

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 >
      <div id="navbar">
        <div id="nav">
          <div>
            <a href="/home.html" target="content"><i  aria-hidden="true"></i>Home</a>
          </div>
          <div>
            <a href="/about.html" target="content"><i  aria-hidden="true"></i>About</a>
          </div>
          <div>
            <a href="/portfolio.html" target="content"><i  aria-hidden="true"></i>Work</a>
          </div>
          <div>
            <a href="/extras.html" target="content"><i  aria-hidden="true"></i>Extras</a>
          </div>
        </div>
        
        
      </div>
      <iframe src="home.html" title="Webpage" id="content" name="content"></iframe>
      
    </div>
</div>
<div >
      <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.

CodePudding user response：

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 >
  <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.

CodePudding user response：

Bro first you should import the background imagein css then u should start body