The hero section on a webpage is intended to be the first element that a person should view on the page. If it does not immediately capture your attention and the message is quickly conveyed then it's not doing its job.
When using an image as a background for a header, there needs to be enough contrast between the text and the background in order for it to be easily legible and just makes it look way better. From a design hierachy, this draws your eyes more to the text, which is usually more important and does not get lost in the background image.
Sarplaninac Mountain Dog
Learn MoreIt is easy to add text over a background image in a div but adding a color overlay on top of that is a little trickier. By using linear-gradient on the background-image property, you are able to add a color overlay.
Sarplaninac Mountain Dog
Learn Morediv {
height: 400px;
padding: 1em;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: #57585a; /* Fallback color. One solid color. */
background-position: center; background-size: cover; background-image: linear-gradient(rgba(0,0,0, 0.4),rgba(0,0,0, 0.7)),url(./sarplaninac.jpg);}
h1 {
text-align: center;
color: #ffffff;
letter-spacing: 0.2em;
margin-bottom: 0.6em;
}
a {
background-color: #1753b2;
color: #ffffff;
border: 2px solid #1753b2;
border-radius: 5px;
padding: 0.6em 1em;
transition: all 0.5s ease;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
a:hover {
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid #1753b2;
color: #1753b2;
cursor: pointer;
}<div>
<h1>Sarplaninac Mountain Dog</h1>
<a>Learn More</a>
</div>