How to fix an issue with background-image opacity causing text to be unreadable?

Question

I have problem with background. I want same like in screenshot 1, But I get like in screenshot 2.

Where is the problem?

html,
body,
.bg-for-1 {
  height: 100%;
}

.bg-for-1 {
  background: black;
}

.bg-for-1 .first {
  position: absolute;
  opacity: 0.2;
  width: 100%;
  height: 100%;
  background-image: url(http://digitalresult.com/wp-content/uploads/2016/06/beautiful-reflection-at-lake-pier-wallpaper-32.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-for-1 .first h3 {
  color: white;
  position: relative;
  text-align: center;
}

<div class="bg-for-1"><div class="first"><h3>Hello</h3></div></div>

Answer 1

Use contain for background-size in css.

.bg-for-1 .first {
  ...
  background-image: url(http://digitalresult.com/wp-content/uploads/2016/06/beautiful-reflection-at-lake-pier-wallpaper-32.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  ...
}

Answer 2

since you need to darken your image with black, you can set a dark overlay over the image with a translucide gradient which will have no effects on the contents :

example related to How to add a color overlay to a background image? + 2 other methods:

html,
body,
.bg-for-1 {
  height: 100%;
}

.bg-for-1 {
color:white;}

.bg-for-1 .first {
  display: flex;
  flex-flow:column;
  justify-content:center;
  align-items: center;

  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/1015/6000/4000);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-for-1 .first h3 {
  color: white;
  position: relative;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-for-1">
  <div class="first">
    <h1>Nice Portfolio!</h1>
    <h3>Find something for you!</h3>
    <button class="btn btn-danger mt-3">Press</button>
  </div>
</div>

<div class="second">
  <h3>Lot of amazing projects for you and your team!</h3>
  <h5>Just simply and nice projects for you and your team , check what we recomandate for you, we work fast and clear.</h5>
  <button type="button" class="btn btn-dark mt-5">Press And Check!</button>
</div>

<div>new div goes on previous</div>