is it possible to have a background color and a background image at the same time on a pseudo element in css

I have a template i need to override.My div is centered in the middle and as my design uses a fullwidth ribbon i used :before and :after to create the effect.it worked now on top of that ribbon i need to have an image displayed on top of it.it works for the main div but for the pseudo elements i cant get it to work.

.backbox:before
{
    content: '';
    display: block;
    width: 5000px;
    height: 400px;
    background-color: gray;
    background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
    background-position:bottom;
    background-repeat: no-repeat;
    top:0px;
    background-repeat: no-repeat;
    position: absolute;
    left: -4985px;
    z-index: 5;
}
.backbox:after
{
    content: '';
    display: block;
    width: 5000px;
    height: 400px;
    background-color: gray;
    background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
    background-position:bottom;
    background-repeat: no-repeat;

    position: absolute;
    right: -4985px;
    z-index:5;
}

Edit: As you requested here is an image of what the web page should actually look like