.hero-component:before, .hero-component:after {
    content: '';
    background-repeat: repeat-x;
    /*background-size: 100%;*/
    background-size: 1920px 30px;
    height: 40px;
    width: 100%;
    position: absolute;
    z-index:3;
}
.hero-component:before {  
    background-image: url(/wp-content/themes/oshin_child/assets/hero-mud-top.svg);
    background-position: top;
    top: -1px;
}
.hero-component:after {
    background-image: url(/wp-content/themes/oshin_child/assets/hero-mud-bottom.svg);
    background-position: bottom;
    bottom: -1px;
}