Image on background color-CodePudding

I am trying to get this layout , an image over background color I have tried a lot with properties like object-fit and overflow but none of them has worked This is what exacttly I need but sorry I can't explain it well 1 indicating area of white background color 2 indicating area of grey background color

Thanks in advance,

CodePudding user response：

Something like that, a color overlaying an image?

.figure {
  position: relative;
  display: block
}

.figure:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff50;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2
}

<figure >
 <img src="https://i.picsum.photos/id/661/500/500.jpg?hmac=Ou6iQzupAfo2_cHo2jvdRE1EgWsOWySyWkoSPY3cRco" alt="Image">
</figure>

CodePudding user response：

Its really hard to understand your question? See my interpretation of your question below ;)

.container {
 display:flex;
 flex-direction:column;
 width:60%; /* TO see it directly in stackoverflow this should be 100% */
 flex-wrap:wrap;
}

.top-container {
 display:flex;
 position:relative;
 background-color:white;
 width:100%;
 min-height:200px;
}

.bottom-container {
  display:flex;
  justify-content:flex-end;
  background-color: #f1f1f1;
  width:100%;
  padding:0 5rem;
}

.indicating-area {
  position: absolute;
  width:100px;
  height:100px;
  left:30px;
  top:30px;
  background-color:#dadada;
}

.image-container {
  transform:translateY(-50%);
  background-color:#dadada;
  padding:1rem;
  border-radius:0.5rem;
}

<div >
  <div >
     <div >
     </div>
  </div>
  
  <div >
    <div >
     <img src="https://picsum.photos/200" width="200" height="200"/>
    </div>
  </div>

</div>

CodePudding user response：

Not sure if this is what you want but if you want to fill with two different colors you can use...

background: linear-gradient(to bottom, white 0%, white 50%, gray 50%, gray 100%);

.test {
  width: 100px; height: 50px; border: 1px solid;
  
  background: linear-gradient(to bottom, white 0%, white 50%, gray 50%, gray 100%);
  
}

<div ></div>