正在平铺的背景图像

Question

I have this image being pulled from a url:

---

And I'm using the following code to display it as background, inside my component render() :

Field.jsx

const { players } = this.props;

return (
  <div className="back" style ={ { backgroundImage: "url('https://url.svg')" } }>
      <div className="field-wrapper" >
         <Output output={this.props.strategy} />
           <div className="row"> {this.getPlayersByPosition(players, 5).map((player,i) => (
               <Position key={i}>{player.name}</Position>))} 
           </div>
 </div>
)

---

What am I missing?

But the image is being tiled, like so:

This is Field.css :

.back {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.field-wrapper {
  overflow: hidden;
  width: 400px;
  height: 600px;
}

.field-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

Answer 1

I think this will help:

background-repeat: no-repeat, no-repeat;

you can find more in:

https://www.w3schools.com/cssref/pr_background-repeat.asp

Answer 2

I would get rid of the inline style and do something like this:

 .back {
        background: url(pathToYourImg) no-repeat center; 
        -webkit-background-size: cover; 
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover;
   }