CSS before and after not working with parallax

Question

I am trying to apply before and after for my div element which is a parallax element

<div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_images/525231494.jpg?t=1489982505">

but my before and after are not being applied, I dont see them when I inspect element in chrome.

Here is my css:

#OurPhilosophy:before {
    position: absolute;
    width: 100%;
    left: 0;
    top: -149px;
    height: 200px;
    background: #fff;
    transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -webkit-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
}

#OurPhilosophy:after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -149px;
    height: 200px;
    background: #fff;
    transform: skewY(3deg);
    -moz-transform: skewY(3deg);
    -webkit-transform: skewY(3deg);
    -ms-transform: skewY(3deg);
}

Answer 1

Add css then try:

#OurPhilosophy:before,
#OurPhilosophy:after {
    content:'';
}

Answer 2

 #OurPhilosophy:before { position: absolute; width: 100%; left: 0; content;""; top: -149px; height: 200px; background: #999; transform: skewY(-3deg); -moz-transform: skewY(-3deg); -webkit-transform: skewY(-3deg); -ms-transform: skewY(-3deg); } #OurPhilosophy:after { position: absolute; width: 100%; left: 0; content;""; bottom: -149px; height: 200px; background: #555; transform: skewY(3deg); -moz-transform: skewY(3deg); -webkit-transform: skewY(3deg); -ms-transform: skewY(3deg); } 

 <div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_images/525231494.jpg?t=1489982505"> 

Answer 3

 #OurPhilosophy::before { position: absolute; width: 100%; left: 0; content:""; top: -149px; height: 200px; background: #555; transform: skewY(-3deg); -moz-transform: skewY(-3deg); -webkit-transform: skewY(-3deg); -ms-transform: skewY(-3deg); } #OurPhilosophy::after { position: absolute; width: 100%; left: 0; content: ""; bottom: -149px; height: 200px; background: #999; transform: skewY(3deg); -moz-transform: skewY(3deg); -webkit-transform: skewY(3deg); -ms-transform: skewY(3deg); } 

 <div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_images/525231494.jpg?t=1489982505">