Css transparent background image for webpage

Question

I have been trying to set the background image to be transparent on CSS so that the text stands out more. I am still very new, and I really don't understand any of the explanations online and when I follow the instructions of tutorials elsewhere, mine still isn't transparent. Some sources have suggested a pseudo-element, which I tried but failed at. What is the simplest way to get the background image to be transparent on CSS without having to completely reorganize the divs and anything else? Thanks in advance

body, 
html {
    font-size: 20px;
    color:white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {    
    background-color: gray;
    background-image: url(images/photo3.jpg);

    background-repeat: no-repeat;
    background-size: cover;
    background-position:relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}



header {
    width: 1024px;
    height: 118px;
    text-align: center;
    color: white;
    font-size: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-top: 50px;

}
    
nav {
    width: 1024px;
    box-sizing: border-box;
    padding-left: 100px;
    padding-right: 100px;
    color: red;
    background-color: rgba(0, 0, 0, 0.00);
    text-align: center;
}

nav a {
    box-sizing: border-box;
    font-size: 25px;
    padding-left: 10px;
    padding-right: 10px;

}
main {
    width: 1024px;
    min-height: 100%;
    padding-top: 10px;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;

}

.main-about {
    width: 1024px;
    height: 1000px;
    padding-top: 10px;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
}


footer {  
    width: 1024px;
    height: 200px;
    padding-left:100px;
    padding-right:100px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    margin-top: auto;

}

h2 {
        font-size: 30px;
        color: white;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    

p {
    font-size: 20px;
    color:white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

a {
    color:lightcyan;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

Answer 1

You can't do this by putting the background on a containing element, like body, because if you set the opacity of that element all its content will also be semi-transparent.

What you can do is attach a pseudo element to say body and make that have the size of the viewport (or body - it depends on what you want here) and set that pseudo element's opacity to less than 1.

Here's a simple example using the code in your question:

body,
html {
  font-size: 20px;
  color: white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background-color: gray;
  background-image: url(https://picsum.photos/id/1015/300/300);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: relative;
  /* this is not the kind of position meant for backgrounds */
  background-position: center center;
  height: 100vh;
  width: 100vw;
  opacity: 0.5
}

header {
  width: 1024px;
  height: 118px;
  text-align: center;
  color: white;
  font-size: 50px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding-top: 50px;
}

nav {
  width: 1024px;
  box-sizing: border-box;
  padding-left: 100px;
  padding-right: 100px;
  color: red;
  background-color: rgba(0, 0, 0, 0.00);
  text-align: center;
}

nav a {
  box-sizing: border-box;
  font-size: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

main {
  width: 1024px;
  min-height: 100%;
  padding-top: 10px;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}

.main-about {
  width: 1024px;
  height: 1000px;
  padding-top: 10px;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}

footer {
  width: 1024px;
  height: 200px;
  padding-left: 100px;
  padding-right: 100px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
  margin-top: auto;
}

h2 {
  font-size: 30px;
  color: white;
  font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

p {
  font-size: 20px;
  color: white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

a {
  color: lightcyan;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

<body></body>