To achieve a full-width div with a background image and text on top, you can use the following code:
Below is the HTML for the div:
<div class="dpsplash">
</div>
And here's the CSS for the dpsplash class:
.dpsplash {
background-image: url('img/banner1.png');
width: 100%;
height: 100vh;
}
If you're having trouble displaying the image, make sure you're referencing the correct URL. You can check out the site here.
For a responsive div background image class that maintains a consistent visible height during screen resizing, you can use the following class:
.responsivebg {
background-image: url('/img/etc..');
background-size: auto 600px;
height: 400px;
background-position: center top;
background-repeat: no-repeat;
}
Feel free to use these classes for your projects!