title: Animate effect for background but not content
body: <p>I made a full <code>width</code> and <code>height</code> for <code>background</code> which is animated to slowly <code>zoom in</code>. The problem is that whatever I put on this background it will also be zooming in. I tried to make opposite animation to even out the effect but it's not very clean solution. Do you know any good way to only animate background? </p>
  
  <pre><code>&lt;header class="header"&gt;
      &lt;div class="header-text"&gt;
          &lt;h1&gt;Welcome to the Milky Way&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  *{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
  html, body{
  height: 100%;
  overflow: hidden;
  
  .header{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  width: 100%;
  background-color: #333;
  background:linear-gradient(
    rgba(0, 0, 0, 0.5), 
    rgba(0, 0, 0, 0.5)
  ),url('bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation-name: bg;
  
  .header-text{
  color: white;
  animation-name: bg-text;
  
  .header, .header-text{
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  
  @keyframes bg{
  0%{transform: scale(1)}
  100%{transform: scale(1.5)}
  
  @keyframes bg-text{
  0%{transform: scale(1)}
  100%{transform: scale(0.666)}
  </code></pre>