标题不会覆盖整个屏幕

Question

我试图获取我的主页（www.insaka.org）的背景图片，以覆盖整个屏幕的宽度，但我似乎无法弄明白。 我不希望整个网站延伸，只是图片。有什么想法吗？

HTML

<header class="business-header">
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6 top-buffer">
            <h1 class="tagline">Insaka</h1>
            <h4 class="tagline">Increasing access to education for rural Zambian girls</h4>
        </div>
    </div>
</div>

CSS

.business-header {
background: url("/images/Insaka poster girls.JPG") center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}

main {
  @extend .container;
  margin-top: 30px; // accommodate the navbar
}

section {
  @extend .row;
  margin-top: 20px;
}

Answer 1

嗯，html结构有很多问题。你需要一个优秀的前端开发人员才能解决问题。

我可以提供的最简单的解决方案是将以下样式应用于主标记

main {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

Answer 2

查看您的main代码max-width

main {
    max-width: 100%;
    padding: 0;
}

Answer 3

  

使用height:100vh和width:100vw设置适合的容器   屏幕。

vh = visual-height

vw = visual-width

在您的情况下，使用100vw使元素适合当前屏幕