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

Question

I am looking for a way to do the following:

I have two sections on my HTML page, the first has a background image property in its CSS class and also has a logo positioned in the bottom of this section and I have too a second section that is just a normal section with some text.

This picture shows the currently structure that I am using.

If the window screen is resized, the logo image has to follow the background image and keep its position in the bottom of the image.

The last thing that I've tried:

 .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>

Unfortunately this solution that I've pasted makes the second section disappear.

Answer 1

This seems to be about what you are trying to accomplish:

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>