Задать вопрос
Kris_del
@Kris_del
html

Как при background-size: cover; держать точку на нужном месте?

Ситуация такая, нужно держать точку с абсолютным позиционированием на нужном месте, background-size: cover обязателен.
https://jsfiddle.net/29eyjf74/
  • Вопрос задан
  • 148 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Делайте img, кидайте его в div с position: relative, и этот div будет иметь такие же размеры, как и картинка в нем. Маркер тоже кидайте в этот div, и задавайте left, top в процентах, они будут относительный размера блока (который такого же размера как картинка).
Пример
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
Chefranov
@Chefranov
Новичок
Если кружок на фоне будет четко по центру (по вертикали и горизонтали), то можно так

.marker {
  width: 10px;
  height: 10px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


Только в данном случае надо четко задать высоту для body height: 100vh;
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Отрисовка дизайна главной и внутренней
19 апр. 2024, в 11:08
5000 руб./за проект
Работы по АСУТП
19 апр. 2024, в 10:59
150000 руб./за проект
Нужен директолог с опытом работы
19 апр. 2024, в 10:02
6000 руб./за проект
Ещё заказы