How to Decrease Image Brightness in CSS

The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:

#myimage {
    filter: brightness(50%);
}

You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

An another: http://davidwalsh.name/css-filters

And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).

It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)

Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).

If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.

Finally you can check the browser support of filter here.

Change brightness of background-image?

This would be an option, but it's not very practical and wouldn't work in older browsers:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

Or for even better color control, try hsla() colors:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

Really, it's better to play with the image in a image editor until you get the browser result you want.

How to adjust the brightness of a background image in a div without it affecting the foreground items?

You can lay an rgba() gradient hover the background-image to darken it.

background: 
     linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),/* the gradient on top, adjust color and opacity to your taste */
      url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);

demo below

.FutureGoals {  height: 100vh;  overflow: hidden;}
.BlizzBox {  height: 100vh;  overflow: hidden;}
.Blizzard1 {  background: url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);  background-repeat: no-repeat;  background-position: 75%;  background-attachment: fixed;  height: 100%;  width: 100%;  transition: all .5s ease;  -moz-transition: all .5s ease;  -ms-transition: all .5s ease;  -webkit-transition: all .5s ease;  -o-transition: all .5s ease;  webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
.Blizzard1:hover {  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);  background-repeat: no-repeat;  background-position: 75%;  background-attachment: fixed;  webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  -moz-transform: scale(1.1);  -webkit-transform: scale(1.1);  -o-transform: scale(1.1);  -ms-transform: scale(1.1);  transform: scale(1.1);  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');}
.BlizzPop {  position: relative;  height: auto;  width: 30%;  left: 25%;  top: 9%;  z-index: 1;  transition: all .7s ease;  -moz-transition: all .7s ease;  -ms-transition: all .7s ease;  -webkit-transition: all .7s ease;  -o-transition: all .7s ease;}
.Blizzard1:hover .BlizzPop {  z-index: 1;  -moz-transform: scale(1.5);  -webkit-transform: scale(1.5);  -o-transform: scale(1.5);  -ms-transform: scale(1.5);  transform: scale(1.5);  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');}

<section class="FutureGoals">  <div class="BlizzBox">    <div class="Blizzard1">      <img alt="BlizzPop" src="https://s8.postimg.cc/5avnnvurp/Blizz_Pop.png" class="BlizzPop">    </div>  </div></section>

CSS adjust brightness of image background and not content

You can add a new element of transparent black that overlays just the background, with the contents of your div sitting in front of it.

<div id="section1">
    <div id="content">
    </div>
</div>

CSS:

#section1 {
    background: url('../images/headerimage1.jpg') center center no-repeat;
    background-size: cover;
    position: relative;
}

#content {
    position: absolute;
}

#section1::before {
    content: '';
    display: block;
    position: absolute;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

How to set opacity or decrease brightness to div's background-image using CSS

Your code actually works and image is visible, but you set opacity: 0.1 and background: blue so it's barely visible. Just increase the opacity and maybe change background-color to more user friendly.

I cleaned up your code and placed content on top of image. In your example content has on image overlay which makes text harder to see.

.my-container {  position: relative;  background: blue;  height: 200px;  font-size:2rem;  color:#fff;}
.my-container:before {  content: '';    position: absolute;  top:0;  right:0;  bottom:0;  left:0;          opacity: 0.6;          background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");  background-position:center;  background-repeat: no-repeat;  background-size: cover;}
#content{  position:absolute;  top:0;  right:0;  bottom:0;  left:0;  z-index:1;}

<div class="my-container">  <div id="content">CONTENT</div><div>

change brightness of image on hover

See the updated code below. Run the snippet.

I simply added pointer-events: none;

to .t_overlay

Here is documentation for pointer events.

.profile_picture{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
        margin-left: 65px;
        filter: brightness(100%);
        cursor: pointer;
}

.profile_picture:hover{
    filter: brightness(70%);
    transition: filter 0.25s ease;
}

.t_overlay{
    position: absolute;
    margin-left: 76px;
    margin-top: -43px;
    font-size: 10px;
    height: 0px;
    width: 0px;
    line-height: 1.2;
    -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
    cursor: pointer;
    opacity: 1;
    color: white;
    pointer-events: none;
}

.t_overlay:hover profile_picture{
    filter: brightness(70%);
}

<div class="account_image">
    <img src="https://cdn.pixabay.com/photo/2020/08/25/18/28/workplace-5517744__340.jpg" class="profile_picture">
    <div class="t_overlay">
    CHANGE AVATAR
    </div>
</div>

Change brightness on image with text on hover

Trigger the change when hovering the container, instead of the image.

.image-container {  position: relative;  text-align: center;  width: 50%;}
.image-container img {  filter: brightness(60%);  width: 100%;}
.image-container:hover img {  filter: brightness(100%);}
.image-text {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  color: #f6f6f6;  font-size: 3.5vw;}

<div class="image-container">  <p>    <a href="/distancer/master/"><img src="https://yacs.dk/wp-content/uploads/2016/09/Yeti_AR2_016-652-1.jpg"><br>      <span class="image-text">Master</span><br>    </a>  </p></div>

How to Decrease Image Brightness in CSS