html css creating link to background - html

Question

I'm an iOS developer and not a web developer. I'm trying to create my website to promote my apps and am trying to attach a link to the background image defined in CSS as #hero. I did some researching and found some examples where the css defines the background as .photo with the associated properties...but my structure is laid out with the # and multiple sections. I've tried experimenting with different combinations like a blind person in the dark and couldn't manage to get anything working in the way I need it. Looking for some help.
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
<div class="hero-container" data-aos="fade-in">
Hero
</div>
</section><!-- End Hero -->
CSS COde below
.header {
border-bottom:1px solid #eaeaea;
}
.header a {
display: block;
background-image: url("./images/embouchure.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:280px;
padding-top:50px;
width:470px;
color: #eaeaea;
}
#hero {
width: 100%;
height: 100vh;
background: url("../img/hero-bg.jpg") top center;
background-size: cotain;
background-repeat: no-repeat;
}
#hero:before {
content: "";
background: rgba(5, 13, 24, 0.3);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
#hero .hero-container {
position: relative;
z-index: 2;
min-width: 300px;
}
#hero h1 {
margin: 0 0 10px 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: #fff;
}
#hero p {
color: #fff;
margin-bottom: 50px;
font-size: 26px;
font-family: "Poppins", sans-serif;
}
#hero p span {
color: #fff;
padding-bottom: 4px;
letter-spacing: 1px;
border-bottom: 3px solid #149ddd;
}
#media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
#media (max-width: 768px) {
#hero h1 {
font-size: 28px;
line-height: 36px;
}
#hero h2 {
font-size: 18px;
line-height: 24px;
margin-bottom: 30px;
}
}

Answer 1

you can achieve it by
javascript
$(".hero-container").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
or you can try like
<a href="https://google.com">
<div class="hero-container">
anything
</div>
</a>
Or, you could set a data-* attribute on the
<div data-location="https://google.com">
and do like:
window.location = $(".hero-container").data("location");