Website Learning Project. Want to change Background image opacity but NOT the elements on top. e.g. navigation bar etc..

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

*::after, *::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

html, body {
    height: 100%;
    width: 100%;
}

.site-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 90px 1fr 60px;
    grid-template-areas: "header-wrapper" "main-wrapper" "footer-wrapper";
}

.header-wrapper {
    grid-area: header-wrapper;
}

.main {
    grid-area: main;
}

.footer-wrapper {
    grid-area: footer-wrapper;
}

.header-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 60px;
    grid-template-areas: "info-bar" "header-nav";
}

.info-bar {
    grid-area: info-bar;
}

.header-nav {
    grid-area: header-nav;
}

.site-wrapper {
    background-image: url("../../images/bg-img2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.info-bar {
    height: 30px;
    line-height: 30px;
}

.info-bar .social-media-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.info-bar .social-media-icons a {
    color: #000;
    font-weight: 600;
}

.margin-right {
    margin-right: auto;
}

.header-nav {
    height: 60px;
    line-height: 60px;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.branding {
    color: #71c441;
    font-size: 32px;
}

.branding:hover {
    color: #724733;
    font-weight: bolder;
}

.navbar a {
    display: block;
    margin-left: 25px;
}