CSS3 2x URL's background and one with opacity

I have this line:

   background: url("../img/background-first-layer.png") no-repeat, url("../img/background-second-layer.png") no-repeat;

I need to add "opacity:0.15" but only for second layer - first layer is unchanged, maybe somebody know how to write it? ( I want to write it in one class)

Edit Here you have example code:

<body>
<div class="container">
        <header class="header-block" alt="code which dont want opacity">
            <a class="brand"><img src="/img/brand.png" alt="code which dont want opacity"></a>
            <a class="logo"><img src="img/logo.png" alt="code which dont want opacity"></a>
        </header>
        <div class="left-area" alt="code which dont want opacity">
        <p>code which dont want opacity</p>
            <section class="register-box" alt="code which dont want opacity">
              <p>code which dont want opacity</p>
              </section>
              
            
        
              
              </div>
              </body>

body {
    color: #fff;
    background: url("../img/background-first-layer.png") no-repeat;
    background-size: cover;
}

.container {
     background: url("../img/background-second-layer.png") no-repeat;
     background-size: cover;
    max-width: 2560px;
    width: 100%;
    height: auto;

}

.left-area {
    padding: 55px 0 0;
    text-align: center;

}

.brand {
    padding-right: 24px;
    width: 100%;
    max-width: 112px;
    opacity: 0.42;
}

Solution

Here is an example using a pseudo element. The pseudo element (::before) is placed absolutely inside of your original container and has the background image with z-index set to -1 and opacity set to 0.42. This way your content is not affected by the opacity and is above it so user can interact with it.

Now you can achieve this with another div inside of your original div as well (simply place a empty div/span and give it the same style as the pseudo element minus the content: " ") but I wasn't sure if you can or cannot edit the html

I added background colour so you can clearly see what's going on

body {
  color: #fff;
  background: green url("../img/background-first-layer.png") no-repeat;
  background-size: cover;
}

.container {
  max-width: 2560px;
  width: 100%;
  height: auto;
  position: relative;
}
.container::before {
  background: gray url("../img/background-second-layer.png") no-repeat;
  background-size: cover;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.42;
  z-index: -1;
}

.left-area {
  padding: 55px 0 0;
  text-align: center;
}

.brand {
  padding-right: 24px;
  width: 100%;
  max-width: 112px;
}

<div class="container">
  <header class="header-block" alt="code which dont want opacity">
    <a class="brand"><img src="/img/brand.png" alt="code which dont want opacity"></a>
    <a class="logo"><img src="img/logo.png" alt="code which dont want opacity"></a>
  </header>
  <div class="left-area" alt="code which dont want opacity">
    <p>code which dont want opacity</p>
    <section class="register-box" alt="code which dont want opacity">
      <p>code which dont want opacity</p>
    </section>
  </div>