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%;
}