html - 如何在调整浏览器大小时堆叠多个图像时将顶部图像调整到中心

Question

我一直在绞尽脑汁想办法让最上面的图片像这个旋转木马上的文字一样调整到中心。

http://nasfactor.com/themes/dotsquare/html/html/index.html

我有 3 张图片。一个是底座，第二个是底座顶部的图案，第三个是 Logo ，每当 View 大小发生变化(例如移动)时我都需要重新调整。这是我目前拥有的 fiddle

#header
        {
            position: relative;
            display: inline;
        }
.overlay-logo
        {

            background-image: url('http://i.imgur.com/T3UwueF.png');
            background-repeat: no-repeat;
            z-index:2;

            position: absolute;
            width:100%;
            height:100%;
            top:50%;
            left:40%;
        }
        .overlay-pattern
        {
            background-image: url('http://i.imgur.com/XYwZohg.png');
            background-repeat: repeat;

            z-index:1;
            opacity:0.8;
            position: absolute;
            width:100%;
            height:400px;
            top:0;
            left:0;
        }
        #header-banner {
            color:#F0626A;
            background: url('http://i.imgur.com/u7yvl8I.jpg') no-repeat center center;
            height: 400px;

            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            padding: 150px 0 0 400px;

            /*position:relative;
            display: inline;
            background-size: cover;*/
        }

https://jsfiddle.net/f4hd3pt6/

最后，每当我重新调整浏览器时，底部的滚动条就会出现。我想知道我是否在 section 标签上做错了什么。

感谢任何帮助!

Answer 1

也许这对你有帮助。

HTML:

<section class="header">
        <div id="header-banner">
            <div class="container overlay-pattern">
                <div class="overlay-logo"></div>
            </div>
        </div>
    </section>

CSS:

#header {
  position: relative;
}
.overlay-logo {
  background-image: url('http://i.imgur.com/T3UwueF.png');
  background-repeat: no-repeat;
  background-position: center center;
  height:100%;
  width: 100vw;
  position: absolute;
  top:40%;
}
.overlay-pattern {
  background-image: url('http://i.imgur.com/XYwZohg.png');
  background-repeat: repeat;
  background-position: center center;
  z-index:1;
  opacity:0.8;
  position: absolute;
  width:100%;
  height:400px;
  top:0;
  left:0;
}
#header-banner {
  color:#F0626A;
  background: url('http://i.imgur.com/u7yvl8I.jpg') no-repeat center center;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

Demo