我一直在尝试在Laravel 5.4项目中创建英雄标题。但是，某件事似乎并未按照预期的方式工作。
（如果您不了解英雄标题是什么，它基本上是一张图像，覆盖了整个屏幕，用作首次加载网站时的背景，通常在其顶部带有一些文本和号召性用语。）
根据我一直在做的研究，这就是我构造代码的方式：
home.blade.php：
@extends('layouts.app')
@section('content')
<div class="container">
@include('partials.hero')
</div>
@endsection
hero.blade.php：
<div class="hero-image">
<div class="hero-text">
<h1>Hero header</h1>
<p>Hero text</p>
<button id="hero-prim" class="button-primary">Action!</button>
<button id="hero-sec" class="button-secondary">Info</button>
</div>
最后是CSS：
.hero-image{
background-image: url(/images/hero-image.png);
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
奇怪的是，文本和按钮随页面一起加载，但是没有图像的迹象。即使我排除任何其他元素并尝试仅显示图像，也没有任何效果。
这使我认为问题必须出在我如何在CSS中设置背景图像，但是我不知道我将不得不如何做不同的事情。
任何帮助或建议，我们将不胜感激！
编辑：
图像现在可以正确显示，但不会延伸到整个屏幕宽度，相反，我认为它只能延伸到整个部分。
无论如何，我不确定到底是哪种代码更改导致了这种情况，但是在尝试了一些Bootstrap类并将html和body的高度定义为100％（由VegaPunk提供）之后，情况就更好了。
很抱歉，我无法定义一个更明确的答案，但这对我来说仍然是个谜，因为昨天这些解决方案似乎都无法独立发挥作用。
最佳答案
您的图像应位于您的公用文件夹中。因此，在公共文件夹中创建一个名为“ Images”的大写字母I，然后将hero-image.png放在创建的文件夹中。