Set background in React.js using style

Question

I want to add a background image in React.js using a style definition that works:

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

As you can see, the image repeats in the x direction. So I wanted to expand it:

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

But the image no longer loads:

So how to set background image and adjust it in React.js?

Answer 1

It works:

  let imgUrl = 'images/berlin.jpg' let styles = { root: { backgroundImage: 'url(' + imgUrl + ')', backgroundSize: 'cover', overflow: 'hidden', }, ... 

Answer 2

Have you tried something like this:

 let imgUrl = 'images/berlin.jpg' let styles = { root: { background: 'url('+ imgUrl + ') noRepeat center center fixed', backgroundSize: 'cover', } 

Inspired from this post: Stretch and scale CSS image in background - only with CSS

Answer 3

Clarification of another answer

 let imgUrl = 'images/berlin.jpg' let styles = { root: { backgroundImage: `url(${ imgUrl })` backgroundRepeat : 'no-repeat', backgroundPosition: 'center', } }