将背景放在另一个容器顶部中心的 CSS 之上

我正在尝试将背景图像放在另一个背景图像的顶部，并将其放置在容器的顶部中心。

像这样。星星背景是一个单独的图像，然后是行星。

目前，行星背景出现在容器的左上角，并将文本移到其底部边缘。我想像往常一样将文本放在容器的中间。

我还需要响应，在较小的屏幕（不小于笔记本电脑）上查看时，背景需要出现在同一个地方。

编辑我还需要行星图像保持固定，因为稍后我将为其添加视差效果。

演示 https://jsfiddle.net/73p0336p/21/

HTML

<section id="third-section">
  <div class="mars">
    <div class="mars_planet"></div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-left">The Launch</h1>
        <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
          <p class="text-left">ALorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
          <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
          <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
      </div>
    </div>
  </div>
</section>

CSS

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: #191617;
}
section {
    padding: 130px 0;
    overflow: hidden;
}
section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

#third-section {
    height: auto;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 3rem;
    color: #dcdcdc;
    background-image: url('http://i.imgur.com/XTQJ9Lo.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
#third-section h1 {
    font-size: 72px;
    color: #dcdcdc;
    text-transform: uppercase;
}
.mars {
    width: 100%;
    z-index: 0;
}
.mars_planet {
    background-image: url('https://i.imgur.com/yQfisM6.png');
    background-size: cover;
    background-position: center top;
    z-index: 200;
    width: 2364px;
    height: 1563px;
    left: 50%;
    margin: -76.3rem 0 0 -1182px;
    will-change: transform;
    opacity: 1;
    transform: translateY(0px) scale(1);
    transition: opacity 4000ms 1500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}