Set background in React.js using style

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?

`backgroundImage` is repeated, but object keys cannot repeat. merge the 2. — dandavis, Apr 04 '16 at 22:17
@dandavis thanks, how can I merge them? Using url: 'xxx' or src: 'xxx'? — Marcel, Apr 04 '16 at 22:18
maybe the backgroundImage has a url property? not sure of react's mapping, but i know you can't repeat keys. can you use CSS instead? you can template — dandavis, Apr 04 '16 at 22:20

score 17 · Answer 1 · answered Apr 04 '16 at 22:31

17

This works:

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

answered Apr 04 '16 at 22:31

Marcel

1,537
5
19
38

score 12 · Answer 2 · answered Aug 13 '17 at 14:46

12

Clarifing another answer

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

answered Aug 13 '17 at 14:46

Rodrigo Cipriani da Rosa

316
3
4

Erik Martín Jordán · Answer 3 · 2020-01-08T14:40:32.627

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 (e.g. '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>

score 4 · Answer 4 · edited May 23 '17 at 11:46

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

edited May 23 '17 at 11:46

Community

1
1

answered Apr 04 '16 at 22:27

FLCcrakers

345
1
4
17

the above unfortunately is not completely right - BUT you gave me the right direction: – Marcel Apr 04 '16 at 22:30
7

Cool. Should you post your final code for the other who will ask ? – FLCcrakers Apr 04 '16 at 22:33
@Marcel can you post the complete answer for other people ? Thank you! – AziCode Aug 15 '17 at 21:50
@all You can find Marcel's approach right here: https://stackoverflow.com/a/36414070/1885946 – Patrik Fuhrmann Aug 17 '18 at 00:02

Set background in React.js using style

4 Answers4

Linked