Html ：：之后和：：之前元素绝对位置don'；不要粘在身体的底部

我快发疯了！英雄联盟 我试图将一个图像放置在页面底部，但它仅在页面宽度较大时才起作用……比如说1360px，但当我将图像缩小到1206px或更小时，图像的主体被向上推，从而在底部创建一个填充，如下图所示（图像由绿色框表示）

绿色图像使用以下CSS定位：

    body::after {
    content: "";
    width: 556px;
    height: 767px;
    position: absolute;
    bottom: 0;
    right: 10%;
    display: block;
    background-image: url("imagens/ghost-dog.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

    body::before {
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

还有一个透明度（紫色阴影），我使用其他属性添加的，它也不会粘到底部。使用此CSS：

    body::after {
    content: "";
    width: 556px;
    height: 767px;
    position: absolute;
    bottom: 0;
    right: 10%;
    display: block;
    background-image: url("imagens/ghost-dog.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

    body::before {
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

最后，为了让我的头脑一圈圈地转，身体有一个背景，但它符合所有屏幕的预期：

body {
    color: #fff;
    font-size: 15px;
    line-height: 21px;
    font-family: "comfortaa-regular";
    background-color: var(--cor-roxa);
    background-image: url("imagens/logo-bg.svg");
    background-repeat: repeat;
}

html, body {
    height: 100%;
}

我已经试着定位身体的相对位置，但它没有解决问题。我不知道这是否重要，但我使用的是bootstrap，我的div组织如下图所示：

---

有什么建议吗？

没有任何例子来回顾，很难确定原因。这就是说，立即想到的是一个带有边距的子元素溢出了它的父容器，推动了窗口边界，而不是它的父容器边界

我会检查你的元素并切换任何边距，看看这是否有任何效果

---

如果您将代码添加到小提琴中，如果我注意到问题，我可以查看并更新此代码。

正确，或者没有发生。您可以添加HTML吗？