фоновая заливка и фоновая картинка - это единое свойство фона.
в вашем первом примере, вы назначаете заливку, потом эту заливку переопределяете картинкой.
но вы можете объединять фоновые слои в одно свойство и скорее всего ищете такой эффект: https://jsfiddle.net/oycvqwkx/