Absolute siblings to have the same dimentions

Question

* {
  margin: 0;
  padding: 0;
}

div#parent {
  position: relative;
}

div#container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

img {
  position: absolute;
  width: 100%;
}

<body>
  <div id="parent">
    <img src="bg.jpg" draggable="false">
    <div id="container"></div>
  </div>
</body>

I'm using the <img> as a background. I want the #container to be on top of the "background" and to have the same dimensions as the background. How may I achieve that without JavaScript?

Why don't you just use background-image on the div? Also, the `` tag doesn't use a closing slash. — Rob, Jul 03 '17 at 03:21
Assign `top` and `left` property with `position` `absolute`. — LKG, Jul 03 '17 at 03:21
@Rob Hi :) Because I want the `div` to automatically adjust to the size of the background, and the closing slash was a typo ;) — , Jul 03 '17 at 03:24
I posted a working answer with explanation may be it will help you. — LKG, Jul 03 '17 at 03:56

score 1 · Accepted Answer · answered Jul 03 '17 at 03:37

Try the following code

<html>
  <head>
    <style>
      * { margin: 0; padding: 0; }
      div#parent { position: relative; }
      div#container { position: absolute; left:0; top:0; z-index:100; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.5); }
      img { position: relative; width: 100%; }
   </style>
 </head>
   <body>
     <div id="parent">
       <img src="bg.jpg" draggable="false"/>
       <div id="container"></div>
     </div>
   </body>
</html>

score 0 · Answer 2 · answered Jul 03 '17 at 03:53

You assigned position:relative to parent div but you not define the child that where the child is set behalf of it's parent, when you assign top and left position the child which has position:absolute get set top and left of the parent.

Like following

Css changes

div#container {
  position: absolute;
  width: 100%;
  top: 0; /* Add this */
  left: 0; /* Add this */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
img {
  width: 100%;
  /* Remove the absolute */
}

* {
  margin: 0;
  padding: 0;
}

div#parent {
  position: relative;
}

div#container {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

img {
  width: 100%;
}

<div id="parent">
  <img src="http://lorempixel.com/400/200/sports" draggable="false" />
  <div id="container"></div>
</div>

I appreciate your kind & correct answer, I accept @shaina's answer as he/she posted the exact same answer first :) — , Jul 03 '17 at 04:09

Absolute siblings to have the same dimentions

2 Answers2