将图像固定为全屏 div

Question

我的问题很简单。 我有这个页面：http://vacanor.com/tests/lared

第一部分的中间有一张图片漂浮在屏幕上。每当我更改屏幕尺寸时，我想将该图像粘贴在第一部分中以保留其位置。我什么都试过了，还是不行。

这是一个关于困扰我的视频：https://www.youtube.com/watch?v=U37_1cY8nAs

我的html（包括第二部分）：

<div class="container-a">
    <!--<div class="col-lg-12">-->
        <div class="img-cover">
            <center><img class="img-cover-i floating" src="img/logo-background.png" alt="Logo">
            </center>
        </div>
    </div>
<!--</div>-->
<!-- Presentación -->
<div class="container-b">
   <!-- <div class="col-lg-12">-->
        <div class="ani">
            <div class="intro">
                <h1 class="animated fadeInDown animated-d-1 cd-headline slide">
                    Bienvenido a La Red
                <small>
                    <span class="text-primary cd-words-wrapper"       style="width: 207px;">
                        <b class="is-hidden">Construir </b>
                        <b class="is-hidden">Jugar</b>
                        <b class="is-hidden">Sobrevivir</b>
                        <b class="is-visible">Divertir-se </b>
                    </span>
                    <span>nunca será lo mismo.</span>
                </small>
                </h1>
            </div>
        </div>
    </div>

还有我的 CSS：

.img-cover {
margin: 0 auto;
width: 95%;
position: relative;
z-index: 10;
margin-top: 50px;
}
.img-cover-i {
position: relative;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
}
.container-b {
margin: 0 auto;
position: absolute;
width: 100%;
height: 100%;
z-index: -3;
top:100%;
}

Answer 1

我没有真正理解你的问题，所以这里有 3 个修正我的理解。

.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
}

上面的代码应该让你的图片在调整屏幕大小时不会超出div，下面是一个如何调整图片大小的例子；

.img-cover-i {
position: relative;
height:calc(100% - 50px)
}

另外，如果您希望您的徽标跟随屏幕但在容器 a 之外不可见，请使用以下代码：

.img-cover-i {
margin-left:calc(50% - 237px);
position: fixed;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

另外，如果使用此代码，请删除将 img 包装在 html 部分中的部分。 我希望这会有所帮助。