CSS background image not displaying as expected

Question

I am trying to put an image, in the background, at the two ends of a big div.

CSS code :

}
.headall {
    background-color: #44546a;
    /*width: 100%;*/
    /*top: 0 !important;*/
}
.headl {
    width: 12%;
    float: left;
    /*display: table-cell;*/
    justify-content: right;
    transform: scaleX(-1);
    background-image: url(./images/leaves.png);
    background-repeat: no-repeat;
    background-size: 130px;
    
}

.headctr {
    width: 76%;
    display: inline-block;
    justify-content: center;
}

.headr {
    width: 12%;
    float: right;
    display: table-cell;
    justify-content: right;
    background-image: url(./images/leaves.png);
    background-repeat: no-repeat;
    background-size: 130px;
}

However, the image will not display.

Placing the image in the main file, works, but it puts it in the foreground....

Answer 1

You need to add quote marks. And if your image file is not in the same folder as your css, you need two dots.

background-image: url("../images/leaves.png");