平铺的背景图片

Question

我有这张图片是从网址中提取的：

this manual

---

我正在使用以下代码将其显示为组件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>
)

---

我想念什么？

但是图像正在平铺，就像这样：

这是 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

我认为这会有所帮助：

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

您可以在以下位置找到更多信息：

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

Answer 2

我会摆脱内联样式并执行以下操作：

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