Parallax effect with pseudo elements - css

Question

I'm building a layout for a clients custom cms system, all the content is built in bootstrap rows which gets printed in a container. The client wanted to be able to make colored rows, i managed this with pseudo elements like this:
.full-row:before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100vw;
height: 100%;
background-color: inherit;
content: '';
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
I wanted to take the same approach to make the client able to make parallax rows as well, but I can't get the background image to fill the entire width of the row, or can't seem to position it the right way.
I have made a codepen to see an example where the colored rows work but the parallax effect sucks. Any suggestions on how to fix this?
Here's the code pen

Answer 1

One solution would be to use left: -9999px; right: -9999px; instead of width but by using this method image will stretch. the problem with you HTML structure is you used .row with in container and use position:relative; on it. If you take row out of container your current code will work fine
h3 {
text-transform: uppercase;
color: #fff;
}
header {
padding-top: 80px;
width: 100%;
height: 50vh;
color: #fff;
background-position: center;
background-image: url(http://i68.tinypic.com/2upfuk2.jpg);
background-size: cover;
}
header h1 {
text-transform: uppercase;
}
header .sub-headline {
font-size: 20px;
font-family: cursive;
}
.big-ass-icons {
text-align: center;
}
.big-ass-icons .fa {
font-size: 30px;
}
.big-ass-icons p {
display: block;
margin: 0 auto;
width: 80%;
}
.dummie-col {
height: 800px;
}
/* Helper classes */
.mar-b-30 {
margin-bottom: 30px;
}
.mar-b-40 {
margin-bottom: 40px;
}
.mar-b-50 {
margin-bottom: 50px;
}
.mar-b-60 {
margin-bottom: 60px;
}
.mar-b-70 {
margin-bottom: 70px;
}
.pad-30 {
padding: 30px 0;
}
.pad-40 {
padding: 40px 0;
}
.pad-50 {
padding: 50px 0;
}
.pad-60 {
padding: 60px 0;
}
.pad-70 {
padding: 70px 0;
}
.bg-gray {
background-color: #f9f9f3;
}
/* Row handeling */
.full-row,
.parallax-row {
position: relative;
}
.full-row:before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100vw;
height: 100%;
background-color: inherit;
content: '';
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.parallax-row:before {
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: -9999px;
display: block !important;
min-height: 100%;
background-color: rgba(0, 0, 0, .7);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
content: '';
}
/* More images to be added */
.image1:before {
background-image: url(http://i68.tinypic.com/2z5m1hh.png);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<header class="mar-b-50">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Big A** Image</h1>
<div class="sub-headline">How interesting</div>
</div>
</div>
</div>
</header>
<section class="container">
<div class="row big-ass-icons mar-b-40">
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-sm-4">
<span class="fa fa-pencil"></span>
<h4>Highly editable</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="row bg-gray full-row pad-40">
<div class="col-xs-12">
<h2>This is a colored row</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt at quos tenetur assumenda laudantium voluptatum laboriosam placeat rem earum, recusandae similique, et vero, doloremque possimus, fugit aliquam magni nulla! Sunt?</p>
</div>
</div>
<div class="row pad-30">
<div class="col-xs-12 text-center">
<h2>This is just a white row</h2>
<p>But it have two columns!</p>
</div>
<div class="col-sm-6">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
</div>
<div class="col-sm-6">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
</div>
</div>
<div class="row parallax-row image1 pad-70">
<div class="col-xs-12 text-center">
<h3>Wuhuuuu, awesome parallax!</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 dummie-col">
<h2>This is just to make the page long, for the parallax effect</h2>
</div>
</div>
</section>

Answer 2

Maybe a dick move, but im going to answer my own question.
The problem was the background-position units. I used vw to make the size so the positioning should be in the same units.
I added:
background-position: 50vw 0;
I also updated the pen