Is it possible to have fixed elements (buttons, greetings) over the dynamic background image which is zooming in?

I am creating a web chat. Main page has a dynamic background image which is zooming in smoothly. There are some "welcome" words, field for Username input and Submit button. All these elements are zooming in together with the background image. Is it possible to make them non animated, fixed over background?

This is for a web chat build with Flask, SocketIO, some Vue, html and css.

HTML:

  <div class="background">
      <head>
        ...
      </head>
      <body>
          <div class="container" id="app">
             <div v-if="state == 0">
                <h2>Welcome to this chat! Please choose a username</h2>
                <form @submit.prevent="setUsername">
                  <input type="text" placeholder="Username..." maxlength="25" v-model:value="username" />
                  <p><input type="submit" value="Join" v-bind:disabled = "username === ''"/></p>
                </form>
              </div>
              <div v-if="state == 1">
                  <ul id="chatbox">
                    <li v-for="msg in this.messages">
                      <b>[[ msg.user ]]</b> : [[ msg.message ]]
                    </li>
                  </ul>
                  <form @submit.prevent="sendMessage">
                  <input type="text" maxlength="600" size="65" placeholder="Message..." v-model:value="message" />
                  <input type="submit" value="Send" v-bind:disabled = "message ===''"/>
                  </form>
              </div>
          </div>

And CSS:

.background {
  margin: 0;
  padding: 0;
  background-image: url('../images/music.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
  text-align: center;
  -webkit-animation: zoomin 5s ease-in;
  animation: zoomin 5s ease-in;
}


@-webkit-keyframes zoomin {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
} /*End of Zoom in Keyframes */


#app {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      height: 75vh;
      width: 95vw;
      position: relative;
      z-index: 2;
}

I expected the buttons and input window to be static, but the are zooming in together with the background.

Another problem is that the background image "jumps" back a little bit upon zoom in animation performed.

Solution

Animations on the parent container will affect the inner elements. What you could try is adding a pseudo to the .background so that it would only be affected on that element.

.background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/music.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  -webkit-animation: zoomin 5s ease-in;
  animation: zoomin 5s ease-in;
}