JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

Baseline
<div class="box1"></div>
Order 1 - image, position color
<div class="box2"></div>
Order 2 - position, image, color
<div class="box3"></div>
Order 3 - color, image, position
<div class="box4"></div>

CSS

div {
    height:100px;
    width:100px;
    margin:20px;
}

.box1 {
    background-image: url(//placehold.it/100/f00);
    background-position: center center;
    background-color: red;
}
.box2 {
    background: 
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */
        red /* background-color */;
}
.box3 {
    background: 
        center center /* background-position */
        url(//placehold.it/100/f00) /* background-image */
        red /* background-color */;
}
.box4 {
    background: 
        red /* background-color */
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */;
}