如何使云图像在CSS中移动，而不会与HTML中的书面内容一起移动？

Question

我希望云图像在背景中移动而不会附加到书面内容上。这是我到目前为止所做的。我尝试了其他方法，但是我仍然有同样的问题。

.intro {
  background-image: url(https://via.placeholder.com/50.jpg);
  position: relative;
  background-repeat: round;
  animation: animatedBackground 5s linear infinite;
}

@keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -20px 0;
  }
  100% {
    background-position: 20px 0;
  }
}

<section class="intro" id="zen-intro">
  <header role="banner">
    <h1>CSS Zen Garden</h1>
    <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
  </header>

  <div class="summary" id="zen-summary" role="article">
    <p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
    <p>Download the example <a href="/examples/index" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">css file</a></p>
  </div>