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 💪🏻

Comments

[Tapesh Patel]

Thank you for sharing this.

[SaidTorres3]

Thank you!