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