Do not use the CSS background shorthand property in React

The problem

I recently came across this bug at work and it took me a minute to figure it out.
What I had was something like this:

<div
    className="image-container"
    style={{
        position: 'absolute',
        top: `${top}%`,
        left: `${left}%`,
        width: `${width}%`,
        height: `${height}%`,
        background: `transparent url(${image_url}) no-repeat center center`,
        backgroundSize: 'contain'
   {{
/>

Everything seems okay, right? Well, in theory.
But as soon as the application started, I noticed that the backgroundSize property was not working!

Let’s get googling

After inspecting the output HTML and a bit of googling, I came across this closed issue on React's Github.

Apparently, using the CSS background shorthand property with a backgroundSize prop causes this last property to be cleared if and when the background property is updated.

Fair enough, let’s fix it

A quick and easy fix is to explicitly set every property by expanding the shorthand property:

<div
    className="image-container"
    style={{
        position: 'absolute',
        top: `${top}%`,
        left: `${left}%`,
        width: `${width}%`,
        height: `${height}%`,
        backgroundColor: 'transparent',
        backgroundImage: `url(${image_url})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: 'contain'
   {{
/>

That's all! I hope this is useful to you 💪🏻