Set background in React.js using style
<p>I want to add a background image in React.js by using a style definition, which works:</p>

<pre><code>let imgUrl = 'images/berlin.jpg'    
let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            overflow: 'hidden',
        },
        ...
</code></pre>

<p><a href="https://i.stack.imgur.com/3hGEz.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/3hGEz.jpg" alt="enter image description here"></a></p>

<p>As you can see, the image repeats in x-direction. So I wanted to extend it by:</p>

<pre><code>let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundImage: {
            flex: 1,
            resizeMode: 'cover', // or 'stretch'
        },
        overflow: 'hidden',
    },
    ...
</code></pre>

<p>But the image is not loaded anymore:</p>

<p><a href="https://i.stack.imgur.com/GnCU9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GnCU9.png" alt="enter image description here"></a></p>

<p>So how to set the background image and adjust it in React.js?</p>