background images outside of a container css

Question

im trying to build a web layout that has a fixed width container. the design calls for background images to go outside of the container though, meanwhile still keeping the text of the divs within the container. below is an image to show what i mean:

The black is the container, the red is the sidebar. the content on the sidebar should stay within the container, but different sections of the sidebar have different background colors.

any suggestions?

Answer 1

You can manage this with pseudo-elements

Extract of relevant code from demo.

aside .block:before {
  position: absolute;
  content: '';
  left: 0;
  top:0;
  height: 100%;
  width: 100vw;
  background: rgba(0,255,0,0.5);
  z-index:-1;
}

Codepen Demo

Note: The layout method here I've used it not specifically relevant. I just use flexbox for fun but this works with other, older layout methods just as well.