title: Set background in React.js using style
body: <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>