Looking to create a seamless background color for a column within a fixed container. Check out my example here. Any tips on achieving this?
I experimented with a few approaches, but couldn't get any of them to work...
Attempt 1:
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/bootstrap-grid';
@import '~bootstrap/scss/mixins';
// Add this class to elements needing breakout backgrounds
.breakout-background {
position: relative;
z-index: 0;
// Background pseudo element
&:before {
content:'';
position: absolute;
height: 100%;
top:0;
width: 100vw;
z-index: -1;
background-color: blue;
@each $breakpoint, $container-max-width in $container-max-widths {
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
left: calc(-100vw / 2 + #{$container-max-width} / 2)
}
}
}
}
Attempt 2:
.breakout-background {
&:before {
content: "";
background-color: #322529;
z-index: -1;
right: 0px;
width: 1000px;
height: 60%;
top: 35%;
position: absolute;
}
}
Attempt 3:
.breakout-background {
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
background: rgba(0, 0, 0, 0.5);
}