:root {
    --red: red;
    --red-gradient: linear-gradient(red, red);
    --square: url('../images/600x600-green-square.png');
}

section { height: 20px; width: 600px; margin: 10px; }

.test-0 { background: url('../images/600x600-green-square.png'); }
.test-1 { background: url('../images/600x600-green-square.png') red; }
.test-2 { background: url('../images/600x600-green-square.png') var(--red); }
.test-3 { background: var(--square); }
.test-4 { background: var(--square) red; }
.test-5 { background: var(--square) var(--red); }
.test-6 { background-image: url('../images/600x600-green-square.png'); }
.test-7 { background-image: url('../images/600x600-green-square.png'), linear-gradient(red, red); }
.test-8 { background-image: url('../images/600x600-green-square.png'), var(--red-gradient); }
.test-9 { background-image: var(--square); }
.test-10 { background-image: var(--square), linear-gradient(red, red); }
.test-11 { background-image: var(--square), var(--red-gradient); }