In my quest to enhance the appearance of my website, I've been grappling with getting the background-image property to cooperate in CSS for the past three days. It's frustrating because I've successfully implemented this feature before, but now I'm encountering issues that are stumping me. In an attempt to troubleshoot, I even resorted to copying a hero image example from W3C, but alas, no luck there either. My goal is to use a background-image to spruce up the header section of my page and I really like the concept of a hero image, so I want to persevere.
The initial code snippet I tried employing was:
header { background-image: url("banner.jpg"); }
<header>
<h1>Donald Goines</h1>
</header>
Unfortunately, this yielded no visible results in terms of the picture displaying, although "Donald Goines" did appear. I also experimented with using ../images/banner.jpg in the URL since I realized I had placed the image within a subfolder. Upon validating my code, no errors were detected.
<body>
<div class="hero-image">
<div class="hero-text">
<h1>Donald Goines</h1>
<p>Author</p>
</div>
</div>
</body>
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/banner.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}