css - HTML/CSS 之谜？无法确定尺寸在哪里调用

Question

我被要求尝试修改页面以在其他地方使用。

基本上，除了一个我无法解决的谜团之外，我所做的一切。

我基于的页面是https://wombatservers.com.au/theburrow

请注意顶部描绘 Minecraft 世界的大图像。好吧，基本上我不能让它填满屏幕的整个宽度（它需要在另一个项目中是特定的大小）。但是我一辈子都找不到控制的地方，底部的蓝色页脚也是如此。

因此，如果有人可以帮助我追踪这些元素的宽度被称为哪一行，那就太好了。

（我希望这是我忽略的一个非常明显的事情）

谢谢

Answer 1

以下css添加图像：

.pager {
  background: url(../images/slide1.jpg) center center repeat-x;
  padding: 50px 0 50px 0;
}

html 看起来像这样：

<div class="pager">
  <div class="wrapper">
    <div class="pager-title l">
      <h1>The Burrow</h1>
      <p>Tutorials, lessons, resources and a whole lot more!</p>
    </div>
    <div class="test-text r">
      <h2>By far the best Aussie host I've ever used! No lag at all!<img src="images/bulate2.png" alt="" style="position:relative; margin-left:10px; margin-top:-15px;"></h2> 
      <p>— Jeremy, <a href="#">EmuCraft Australia</a></p>
    </div>
    <div class="c"></div>
  </div>
</div>

您可能希望将寻呼机 div 放入包装器 div 中，如下所示：

<div class="wrapper">
  <div class="pager">
    <div class="pager-title l">
      <h1>The Burrow</h1>
      <p>Tutorials, lessons, resources and a whole lot more!</p>
    </div>
    <div class="test-text r">
      <h2>By far the best Aussie host I've ever used! No lag at all!<img src="images/bulate2.png" alt="" style="position:relative; margin-left:10px; margin-top:-15px;"></h2> 
      <p>— Jeremy, <a href="#">EmuCraft Australia</a></p>
    </div>
    <div class="c"></div>
  </div>
</div>

或者类似的东西，但是你必须对页脚做同样的事情。

Answer 2

两张图片都是背景，并且由于没有设置 background-size 属性，浏览器只使用图像文件的完整宽度并将其裁剪到 html 对象结束的位置。所以header图片的宽度是1600px，footer是1169px。但显示的大小取决于您的视口宽度。