使用样式在 React.js 中设置背景

Question

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

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

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

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

But the image is not loaded anymore:

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

Answer 1

This works:

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

Answer 2

Clarifing another answer

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

Answer 3

If you use an image as background, is better to use the 'backgroundImage' property.

If you use the 'background' property, this may cause issues on reloading the component (eg 'cover' attribute will not apply properly).

Solution proposed:

let imgUrl = 'images/berlin.jpg'; 

<div className = 'Component-Bg' 
     style = {{ backgroundImage: `url(${imgUrl})`,
                backgroundSize: 'cover', 
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat',
              }}>
</div>

Answer 4

Have you tried somthing 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 a CSS image in the background - with CSS only