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{
	background-color: transparent; /* Needs to be here so the color won't cover the image. */
	background-repeat: no-repeat; /* Don't want our image to tile. */
	background-position: 0 1000%; /* Shove the image waaay out of view */
	background-size: 0 0; /* Make it 0px high and wide, pretty much invisible */
  display: table; /* Makes sure it can contain the pseudo-elements properly */
	position: relative; /* the pseudo-element are position absolute, we need an anchor */
   width: 100%;
}

.break-wrapper::after {
	content: ""; /* Necessary attribute for pseudo elements to be valid */
  display: block; /* Need this so it will respect height and width attributes */
  background-image: inherit;
  background-position: center center; /* Puts the image in teh middle of the container. */
	background-size: cover; /* Takes up the full space of the element */
	background-repeat: no-repeat; /* Makes sure it won't repeat itself */
  width: 100vw; /* This will ensure it is always the fulll Viewable Width of our screen */
	height: 100%; /* Take up the whole height of the parent */
  position: absolute;
 }