Почему элементы img не остаются закрепленными при изменении размера веб-сайта? ⇐ Html

[Anonymous]

Я создаю веб-сайт и пытаюсь закрепить/привязать свои элементы, когда я расширяю или сворачиваю веб-страницу. Элементы должны выглядеть так, как будто они являются частью фонового изображения при его расширении, поэтому они не должны перемещаться вместе с браузером. Элементы также кликабельны и должны измениться на другой элемент (изображение). Думаю, я уже это понял, поскольку они меняются, когда на них можно кликнуть, когда я добавляю JavaScript. Мои элементы, которые мне нужно оставить неизменными, — это имеющиеся у меня изображения («yall.png и «magazine.png», но я буду добавлять больше изображений). Фон —
url('new.png')

и тоже должен оставаться прежним, он не должен двигаться вверх или вниз, но это так. (Возможно, именно поэтому изображения меняют положение)
В Chrome, когда я сворачиваю свою веб-страницу, элементы перемещаются в другую часть веб-страницы — вниз, влево и т. д. — когда я хочу, чтобы они были закреплены в одном месте на веб-сайте. До сих пор я пытался выровнять изображение в CSS, чтобы зафиксировать положение, чтобы каждый элемент имел определенный размер и координаты (.photo {position: fix}, а также высоту, ширину, левое и верхнее положение, имея определенные координаты в пикселях. Тело (которое содержит фоновое изображение «home.png») тоже немного запутывается, потому что изображение перемещается вверх, а не остается на месте.
По сути, я хочу сохранить одни и те же координаты для фонового изображения и другого изображения. элементы, даже если они не полностью помещаются на экране. Возможно ли это сделать? Координаты очень специфичны (или должны быть такими), чтобы они выглядели так, как будто они являются частью фонового изображения (но при этом были доступны для кликов). Должен ли я меньше фокусироваться на свернутом экране или это повлияет на взаимодействие с пользователем?
Это то, что у меня есть:
CSS
html, body {
height: 100%; /* Ensure html and body take full height */
margin: 0; /* Remove default body margin */
padding: 0; /* Remove default body padding */
}

/* background image */
body {
background-color: #fffcca;
background-size: cover;
position: relative;
background-image: url(home.png);
color: white;
font-family: "Bookman Old Style", Georgia, serif;
font-size: 11px;
overflow: hidden;

}

/*cursor*/

body {
cursor: url(https://faninteractive.neocities.org/mag.cur), auto;
}

a {
cursor: url(https://faninteractive.neocities.org/maghover.cur), auto;
}

img:hover {
cursor: url("https://faninteractive.neocities.org/maghover.cur"), pointer; /* Or another fallback like 'grab', 'help', etc. */

}

/*end cursor*/

body {
display: block;

}
/* border - double check around here */

body {
border: 65px solid transparent;
padding: 25px;
border-image-source: url('new.png');
border-image-slice: 50;
border-image-width: 65px;
border-image-repeat: round;
/* Repeats and scales the image */
}

html {
overflow-y: scroll;
}

font-face {
font-family: "nancy"; /* Choose a name for your font */
src: url("font2.woff"); /* Path to your uploaded font file */
}

/* centering file image */

.container {
display: inline;
align-content: flex-start;
background: blue;
}

.photo {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100px;
background: red;
margin: 2px;
z-index: 100;
}

#fi {
position: absolute;
top: 250px; /* goes down Distance from the top of the viewport */
right: 300px;
bottom: 100px; /*goes up*/
left: 250px; /*my right moves across desk to the correct position */
display: block;
max-width: 100%;
z-index: 1;
padding: 5%;
/* Distance from the right of the viewport */
/* You can use left/bottom instead of right/top as needed */
/* Ensures the image stays on top of other content */

}

.wrapper #fi {
width: 425px;
height: 225px;
position: relative;
Padding: 5%;
}

#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px; /* Or your desired fixed width */
}

Javascript
// Select the first image element
const myImage = document.querySelector('img');

// Add a single event listener to toggle its source
if (myImage) { // Check if an image was found
myImage.addEventListener('click', () => {
const currentSrc = myImage.getAttribute('src');

// Toggle between 'casefile.jpeg' and 'file.png'
if (currentSrc === 'casefile.jpeg') {
myImage.setAttribute('src', 'yall.png');
} else {
myImage.setAttribute('src', 'casefile.jpeg');
}

// If you intended a *different* image to toggle between 'hold.jpeg' and 'magazine.png',
// you would need a separate element and listener for that.
});
}

if (allImages.length > 1) {
const secondImage = allImages[1];
secondImage.src = 'magazine.png'; // This will set the source once on load
}
if (myImage) { // Check if an image was found
myImage.addEventListener('click', () => {
const currentSrc = myImage.getAttribute('src');

// Toggle between 'casefile.jpeg' and 'file.png'
if (currentSrc === 'link.png') {
myImage.setAttribute('src', 'magazine.png');
} else {
myImage.setAttribute('src', 'link.png');
}

// If you intended a *different* image to toggle between 'hold.jpeg' and 'magazine.png',
// you would need a separate element and listener for that.
});
}

//cursor

//menu function
function myFunction() {
alert("You clicked the coffee cup!");
}

HTML






Center of Operations

































Click Me












Center of Operations

































Click Me







Подробнее здесь: https://stackoverflow.com/questions/798 ... te-resizes