相关疑难解决方法(0)

有没有办法让CSS中的背景拉伸或缩放以填充其容器？

我希望实现我网页的某些部分,使背景图像能够完整地展开页面,边缘没有空白区域.这可能吗？我使用基础5框架.

HTML

  <div class="row"  id="wrapper">
    <div class="large-12  columns">
      <div class="kickstart"><img src="img/kick-start.png">
        <p class="getfit"><img src="img/get-fit.png"></p>
        <p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
        <p class="get-contact"><img src="img/get-contact-btn.png"></p>
        </div>
        </div>
      </div>

CSS

#wrapper {
    background-image: url("../img/home-img.png");
    background-repeat: no-repeat;
    width: 100% !important;
    z-index: 0;


}
.kickstart {

    padding: 30px;
}
.getfit {
    padding-top: 10px;
}

.home-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: …

我正在尝试在React中设置背景图像，但是它只覆盖了大约75％的高度。

似乎该组件并没有占据所有高度。

有什么解决方案？

在index.js中：

ReactDOM.render(<Login />, document.getElementById('root'));

在index.css中：

html, body, .Login-component {
  height: 100%;
}

在Login.js中：

render() {
    return (
      <div className='Login-component'>
    );
}

在Login.css中

.Login-component {
    background: url(../static/login-bg.jpg) no-repeat center center fixed;
  background-size: cover;
}

最终结果：屏幕截图