Как я могу заставить изображения на сайте HTML оставаться на месте относительно фонового изображения при масштабировании ⇐ Html

[Anonymous]

Я создаю личный сайт. Я хотел, чтобы фоновое изображение соответствовало разным размерам экрана, чтобы по краям не было белого цвета, а затем поместил изображения в виде ссылок сверху. Мне бы хотелось, чтобы эти ссылки на изображения оставались в том же положении относительно фонового изображения, чтобы фотографии выравнивались даже при просмотре на экранах разных размеров, но я не могу понять, возможно ли это и как это возможно.

Код: Выделить всё

html,
body {
background-image: url("https://cdn.pixabay.com/photo/2022/10/22/17/00/gull-7539615_1280.jpg");
background-position: center;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
}

#books {
display: block;
padding: 50px;
background-image: url("https://cdn.pixabay.com/photo/2022/08/24/05/44/duck-7406987_1280.jpg");
transition: transform .2s;
position: absolute;
left: -18.5%;
top: 4%;
scale: 25%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
}

Код: Выделить всё

[url=sitelink]
[/url]

Подробнее здесь: https://stackoverflow.com/questions/797 ... ground-ima