Как зафиксировать элемент по отношению к определенной точке фона?
У меня есть большое фоновое изображение. К этому изображению мне нужно привязать элементы (текст по середине). Проблема в том, что на основном изображении background-size: cover, поэтому при ресайзе наложенное изображение плавает, а мне нужно как-то привязаться к определенному месту. Это возможно сделать?
Дополнительно:
Без js и при cover - нет.
И куда будет деваться текст, если нужная часть изображения обрежется cover?
. Тоесть текст должен уменьшаться
Но мы с вами уже вроде говорили, что проще целой картинкой.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для зафиксирования элемента по отношению к определенной точке фона веб-страницы, вы можете использовать CSS свойство position: fixed. Это свойство заставляет элемент оставаться на месте при прокрутке страницы, относительно браузера.
Вот пример использования этого свойства вместе с другими CSS свойствами для зафиксирования элемента в определенной точке фона:
.fixed-element { position: fixed; top: 50px; /* расстояние от верхнего края страницы */ left: 50px; /* расстояние от левого края страницы */ background-color: #f1f1f1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } <div class="background"> <!-- Ваш контент здесь --> </div> <div class="fixed-element"> <!-- Фиксированный элемент --> </div>.fixed-element { position: fixed; top: 50px; /* расстояние от верхнего края страницы */ left: 50px; /* расстояние от левого края страницы */ background-color: #f1f1f1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } <div class="background"> <!-- Ваш контент здесь --> </div> <div class="fixed-element"> <!-- Фиксированный элемент --> </div>
В этом примере .fixed-element будет фиксироваться в верхнем левом углу страницы (по 50px от верхнего и левого края). Вы можете изменить значения top и left, чтобы определить точное положение элемента относительно фона.
Убедитесь, что ваш элемент имеет уникальный класс или идентификатор, чтобы не повлиять на другие элементы на странице. Кроме того, убедитесь, что ваш фон не перекрывает зафиксированный элемент, чтобы он был видимым для пользователей.
Надеюсь, это поможет вам зафиксировать элемент на фоне страницы! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.