Question

我一直试图找到解决以下问题的解决方案几个小时，我找不到我的错误。我想创建一个响应式jumbotron背景图像。它适用于此处：http://www.turfguerilla.org/index.html但不在此处：http://www.turfguerilla.org/thesport.html

我在两个站点的html中使用相同的main.css文件和相同的命令。所以我对于该做什么以及为什么结果不同感到困惑。谢谢您的帮助。如果这还不够，我也可以发布完整的文件。

这是main.css的相关部分：

.jumbotron h1 {
  color: #fff;
  font-size: 700%;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 350%;
  color: #fff;
 }

.jumbotron-homepage .jumbotron {
  background-image:url('http://s16.postimg.org/ow3sxla45/jumbotron_background_4.png');
  height: 500px;
  background-size: cover;
  margin-bottom: 40px;
}


.jumbotron-thesport .jumbotron {
  background-image:url('http://s21.postimg.org/r6estj2lj/thesport_jumbotron_background_2.png');
  height: 500px;
  background-size: cover;
  margin-bottom: 40px;

这是index.html的相关部分

<div class="jumbotron-homepage">
    <div class="jumbotron">
        <h1 align="center">Turf Guerilla Lacrosse</h1>
        <p align="center">Lacrosse Travelling Team</p>
    </div>
</div>

这是来自theport.html

<div class="jumbotron-thesport">
    <div class="jumbotron">
        <h1 align="center">The Sport</h1>
        <p align="center">of Lacrosse</p>
    </div>
</div>

Jumbotron背景没有响应

0 个答案: