调整窗口屏幕大小时图像跟随背景

Question

我正在寻找一种执行以下操作的方法：

我的HTML页面上有两个部分，第一个部分在其CSS类中具有背景图片属性，并且徽标也位于该部分的底部，第二个部分也只是一个普通的部分文字。

此图显示了我正在使用的当前结构。

如果调整了窗口屏幕的大小，徽标图像必须跟随背景图像，并将其位置保持在图像底部。

我尝试过的最后一件事：

.background {
    background: url('../images/background-heroes.png') no-repeat;
    background-position: top center;
    background-size: 100% auto;
    position: fixed;
    width: 100%;
    height: 100%;
}

.background .logo {
    width: 20%;
    padding: 20% 0 5% 0;
    margin: 0 auto;
}

.background h1 {
    font-size: 3em;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

<section class="background">
   <div class="logo">
     <img src="images/logo.png">
   </div>
   <h1>LIVE YOUR OWN ANIME!</h1>
</section>

不幸的是，我粘贴的此解决方案使第二部分消失了。

Answer 1

这似乎与您要完成的工作有关：

CSS

.background-image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

HTML

<div class="background-image">
    <img class="logo">
</div>

<div class="another-section"></div>