Setting a background color on only a part of the background

Question

I have two flexbox columns, one with an image and one with some text. I would like to place a div underneath these two columns, like an 'underlay' filled with colour.

This screenshot shows the grey box I am trying to place under the column content.

It would also be ideal if this 'underlay' is the same height as the text. I have tried setting the containing row to position: relative and then creating an ::after that is absolutely positioned as the colour fill, but could not work it out.

I have created a fiddle that shows my work so far.

.cheetos-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.cheetos-row::after {
  background-color: red;
  height: 200px;
  width: 200px;
}

.cheetos-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.cheetos-column h2 {
  color: #F15A22;
}

.cheetos-column img {
  height: 500px;
  width: auto;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cheetos-row {
    display: block;
  }
}

<div class='cheetos-row'>
  <div class='cheetos-column'>
    <p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image">
    </p>
  </div>
  <div class='cheetos-column'>

    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>

    <p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>

    <p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>

    <p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>

    <p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>

  </div>
</div>

Answer 1

It may be possible with a series of overlapping divs.

I used CSS grid because it provides line-based placement properties, which allow for grid areas to overlap each other.

The layout below limits the height of the background color to the natural height of the text, while also getting the image to appear to overflow the background color.

It switches to a single-column layout on smaller screens, per your media query.

.cheetos-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
}

.cheetos-column:first-child {
  grid-column: 1 / 4;
  grid-row: 1;
  z-index: 1;
}

.cheetos-column img {
  width: 100%;
  height: 500px;
  object-fit: contain;
  object-position: top;
}

.cheetos-column:last-child {
  grid-column: 2 / -1;
  grid-row: 1;
  background-color: gray;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.cheetos-column:last-child > * {
  grid-column: 3 / -1;
}

@media (max-width: 768px) {
  .cheetos-row,
  .cheetos-column:last-child {
    display: block; /* stacks content & deactivates all grid properties */
  }
  .cheetos-column img {
    width: 100%;
    height: auto;
  }
}

.cheetos-column h2 {
  color: #F15A22;
}

<div class='cheetos-row'>
  <div class='cheetos-column'>
    <p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image">
    </p>
  </div>
  <div class='cheetos-column'>
    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>
    <p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>
    <p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>
    <p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>
    <p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>
  </div>
</div>

jsFiddle demo

Answer 2

I just set background color with help of ::after pseudo-element property something like below snippet.

.cheetos-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.cheetos-row::after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  background-color: #bababa;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.cheetos-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.cheetos-column h2 {
  color: #F15A22;
}
.cheetos-column img {
  max-height: 500px;
  width: auto;
  max-width:100%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .cheetos-row {
     display: block;
   }
}

<div class='cheetos-row'>
  <div class='cheetos-column'>
   <p><img src="https://www.pngkit.com/png/full/154-1543048_nicolas-the-wicker-man-nic-cage-white-background.png" class="cheetos-image"></p>
  </div>
  <div class='cheetos-column'>
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
    <p>Sed rhoncus sagittis porta. Morbi mollis aliquam turpis quis porttitor. Donec augue nisi, semper id ante sit amet, facilisis consectetur libero. Donec cursus ullamcorper eros, at congue velit lobortis vel. Nam vitae semper eros.</p>
    <p>Phasellus sagittis, neque eu finibus dictum, mi ipsum ullamcorper metus, vitae varius turpis risus eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.</p>
    <p>Vestibulum neque urna, scelerisque id iaculis eu, feugiat et urna.</p>
    <p>Nunc ex nibh, lobortis eu augue eget, molestie convallis lacus. Nunc ut volutpat nibh, ac cursus magna.</p>
  </div>
</div>