Feeling a bit crazy right now! Haha. I'm facing a challenge in positioning an image at the bottom of a webpage. It seems to work fine when the page width is larger, around 1360px, but as soon as I shrink it to 1206px or less, the image gets pushed up, leaving space at the bottom like shown in the image below (The green box represents the image). https://i.sstatic.net/CmSIP.png
The CSS code used to position the green image is:
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;
}
In addition, there is a purplish shadow added for transparency that has also not stuck to the bottom. This was achieved using this CSS:
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;
}
To add to the confusion, the background of the body fits all screen sizes as expected with the following CSS:
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%;
}
I've attempted setting the position of the body to relative, but unfortunately, it did not resolve the issue. Just in case, I am using Bootstrap and my div layout resembles the image provided here:
https://i.sstatic.net/mYYNn.png
Any helpful suggestions would be greatly appreciated!