How to add react style no-repeat

Question

I'm using react. I've added a no-repeat style to backgroundImage, but the image doesn't show up.
when I remove the no-repeat, the image shows up.

    <div
      style={{
        position: 'relative',
        width: '580px',
        height: '460px',
        marginRight: '300px',
        marginBottom: '20px',
        marginLeft: '80px',
        backgroundImage: `url(${url}) no-repeat 50% 50%`,
      }}
    >

Håken Lid · Answer 1 · 2021-03-20T11:46:54.453

2

The css background-image does not support repeat/no-repeat. You should use the background-repeat property.

backgroundRepeat: "no-repeat"

You could also use the css background shorthand to define multiple background style properties (in any order).

background: "no-repeat center url(./lolcat.png)"

edited Mar 20 '21 at 11:46

answered Mar 20 '21 at 11:40

Håken Lid

22,318
9
52
67

50% Where should I put the 50%? – ryuma Mar 20 '21 at 12:56
You can use `background-position: 50% 50%;` or it can be part of the `background` shorthand property. – Håken Lid Mar 20 '21 at 19:35

How to add react style no-repeat

1 Answers1