Jumbotron背景图像没有响应

时间:2017-05-05 15:05:11

标签: html css twitter-bootstrap background-image

当我在桌面上查看该页面时,它工作正常,图像响应迅速。当我直接在iPhone上查看页面时,图像不正确。

Screenshots of the jumbotron image on a PC and on a phone. The image shows a man in the PC version but the phone shows a blurry close up of the brick wall behind him.

的index.html

  <header>
    <div class="jumbotron">
      <div class="container" id="maincontent" tabindex="-1">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-text">
                    <h1 class="name">Headline</h1>
                    <hr class="star-light">
                    <span class="skills">Sub-header</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</header>

Style.css(freelance.css)

.jumbotron {
  background: url("http://vlastapolach.cz/img/expecto.jpg") no-repeat fixed;
  background-size: cover;
  background-position: top center;
  height: auto;
}

完整代码在此处:https://github.com/vlastapolach/portfolio

我尝试了这些,但它在桌面上也无法正常工作。

background-size: contain;
background-size: auto;
background-size: 100% 100%;

1 个答案:

答案 0 :(得分:1)

简写语法将background-size保持为fixed。我删除了固定的。

.jumbotron {
  background: url("http://vlastapolach.cz/img/expecto.jpg") no-repeat;
  background-size: cover;
  background-position: top center;
  height: auto;
  width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <header>
    <div class="jumbotron">
      <div class="container" id="maincontent" tabindex="-1">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-text">
                    <h1 class="name">Headline</h1>
                    <hr class="star-light">
                    <span class="skills">Sub-header</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</header>