Hello,

I would like to create the below using a div container and then have the image coming out of it.

I use bootstrap, so any assistance and help is appreciated.

 

Thanks

Set a white background to the parent div then a grey background to the child div then layer the image over the top

Or...

Add the white and grey backgrounds to the image.

Or...

Don't bother as it's not going to work properly on a small screen anyway.

Any why on earth are you still using bootstrap! It's bloated, dated and poorly responsive.

It's been a long time (16 years lol)

Just having a play with this. I am using grid for overlays. Reasonably new to me, but if you set two elements to the same 'area' they will overlap. 

This is vanilla CSS not bootstrap. You may be able to extract something from it, I don't know.

codepen link here

It is responsive, but would benefit from having a non-cropped cat

edit: having issue formatting a link here `[link](url)` doesn't work. Can you not use basic markdown here?

https://codepen.io/rpg2019/pen/YPzmpWR

Have also noticed that the OP posted back in January, so may well be long gone. Only just noticed sorry.

Edited April 12, 20251 yr by RLM
Adjust comment

To make an image overlay its parent <div>, you can use absolute positioning combined with position: relative on the parent. This way, the image will be positioned relative to the parent container and can stretch across it.

Here’s an example:

<div class="parent">
  <img src="example.jpg" alt="Overlay Image" class="overlay-img">
  <p>Some content inside parent div</p>
</div>

.parent {
  position: relative; /* Makes this the reference for absolutely positioned children */
  width: 300px;
  height: 200px;
  background: #f0f0f0;
}

.overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;   /* Cover full width */
  height: 100%;  /* Cover full height */
  object-fit: cover; /* Maintain aspect ratio */
  opacity: 0.7;  /* Optional: make it semi-transparent */
  z-index: 1;    /* Ensure it's above the background but you can adjust for content */
}

This makes the image cover the parent div like a background. If you need text or other elements to appear above the image, give them a higher z-index.