extend background outside of grid foundation - html

Question

Is there a way to extend a backround to the left or right out of a grid? for example if i wanted to do a 100% background with a grid in place i would do something like:
<div class="100%BACKGROUND">
<div class="row>
<div class="large-12 columns>
</div>
</div>
</div>
Which works perfectly but what if i wanted to extend a background color outside of the grid to the side of the page and by this i mean for example
<div class="row>
<div class="large-8 columns">
</div>
<div class="BACKGROUNDSTART"> <-- background start
<div class="large-4 columns">
</div>
</div>
</div> <-- background end
Now this doesn't work obviously but this is the kind of thing i am trying to achieve heres a mockup of how it would look.

Answer 1

This can be achieved with a pseufo-element as follows:
Codepen Demo
Basic HTML structure
<div class="container">
<div class="level"></div>
<div class="level">
<div class="split"></div>
<div class="split purple"></div> /* div to be extended */
</div>
<div class="level"></div>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
}
.level {
height:100px;
background: #bada55;
clear:both;
border:1px solid black;
}
.split {
width:50%;
height:100%;
float:left;
}
.purple {
position: relative;
background: #663399;
opacity:0.5; /* just for visibility of effect */
}
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:after {
left: 100%;
}