Breaking the Wrapper

An example of breaking a fixed with wrapper.

by brucifer906

HTML

<div class="wrapper">
	<p>Some Content</p>
    <!-- Please excuse the image I had to use, I needed an example for the demo -->
    <p class="break-wrapper" style="background-image:url('https://images.unsplash.com/photo-1601037055952-0651d4833621?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')">Full Width Content</p>
    <p>More Content</p>
</div>

CSS

.wrapper {
  max-width: 200px;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0.4);
}

.break-wrapper {
	display: table;
	position: relative;
  width: 100%;
  color: #fff; /* Added too see above image */
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 1000%;
	background-size: 0 0; 
}

.break-wrapper::after {
	position: absolute;
	top: 0;
	left: 50%;
  z-index: -2; /* Updated to be behind the ::before */
	transform: translateX(-50%);
  display: block;
	width: 100vw;
	height: 100%;
	background-color: inherit; 
	background-image: inherit;
	background-position: center center;
	background-size: cover; 
	background-repeat: no-repeat;
  content: "";
}

.break-wrapper::before {
	position: absolute;
	top: 0;
	left: 50%;
  z-index: -1;
	transform: translateX(-50%);
  display: block;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
  content: "";
}