How to join a background colour to a background image using CSS?

Question

I am having a problem with creating a hover effect with a PNG image and CSS. As the image below shows the image is a triangle notch. I am trying to make the background color extend left from the image and not overlap it as is happening in my example.

Hover Background and Image

.parent-1:hover, .parent-2:hover, .parent-3:hover {
    background: #993408 url(/images/brown-notch.png) no-repeat right;
    background-size: contain;
    position: relative; 
    padding-left: 10px;
    color: #fff !important;
    z-index: 1;   
}

Is there a way to make the background end where the image starts, so it becomes an arrow and be responsive? I attempted this but it does not work responsively:

.parent-1:hover::before, .parent-2:hover::before, .parent-3:hover::before {
    content: '';
    background-color: #993408;
    background-position: left;
    position: absolute;
    display: block;
    left: 0;
    z-index: -1;
    font-size: 1rem; 
    width: 96%;
    height: 100%;
}

Answer 1

Assuming your image is 10px set the width on your :before elements to:

width: calc(100% - 10px);