how to create a tailwindcss plugin for background with gradient?

I am new to tailwind and I can't create this plugin for background image with opacity.

const plugin = require('tailwindcss/plugin');

module.exports = plugin.withOptions(() => {
    return function({addUtilities}) {
        addUtilities({
            '.bg-img-with-opacity': {
                'background': 'linear-gradient(
                    rgba(43, 108, 176, 0.9),
                    rgba(43, 108, 176, 0.9)
                ),
                url('../images/background-1.jpg')',
            }
        })
    }
})

The problem here is that I am using two values with a comma and it's not allowed for an object. Thanks in advance.

I think if you use backticks ` to wrap your multi-line background rule all should work fine:

const plugin = require('tailwindcss/plugin')

module.exports = plugin.withOptions(() => {
  return function ({addUtilities}) {
    addUtilities({
      '.bg-img-with-opacity': {
        'background': `linear-gradient(
          rgba(43, 108, 176, 0.9),
          rgba(43, 108, 176, 0.9)
        ),
        url(../images/background-1.jpg)`,
      }
    })
  }
})

Here is a demo demo in case it helps.