正在平鋪的背景圖像

Question

我從 url 中提取了這張圖片：

---

我在我的組件render()中使用以下代碼將其顯示為背景：

字段.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;
   }