Как поместить элемент div в точную точку на фоне

0

Я ищу решение, как расположить div в точную позицию на фоне. У меня есть фоновое изображение (http://www.jewelryplatform.com/coming-soon.jpg), и мне нужно разместить целые div с формой и т.д. В центре изображения, где вы можете увидеть окно для этого. Вторая проблема заключается в том, что изображение будет изменять размер окна. Есть ли простой способ, как это сделать?

  • 0
    Пожалуйста, покажите соответствующий HTML + CCS, который у вас есть для этого макета.
  • 0
    Это возможно с использованием процентов. Вы можете установить ширину фона на 100%, а затем центрировать div, также используя проценты.
Показать ещё 2 комментария
Теги:
background-image

2 ответа

0
Лучший ответ

у вас есть большой опыт работы с css и медиа-запросами?

Вы можете добавить контрольные точки в свой css, а затем назначить определенный стиль элементу в этой точке останова.

#formDiv{ position: absolute; left 50%; top:50%}
@media only screen and (max-width: 995px) {
   #formDiv{ position: absolute; left 25%; top:25%}
}
Поделиться
  • 0
    Я не смог сделать это с процентами. Я должен был сделать это для разных разрешений. Так что это решило мою проблему.
0

Я создал скрипку, которая сохранит форму над центром div.

Ключ должен сделать left: 50% для формы, которая будет центрировать его, а затем отрицательно оставить левую половину своей ширины, чтобы сохранить ее в центре. То же самое относится и к top: 50%. Поскольку все позиционируется с использованием процентов, оно будет перемещаться при изменении размера окна.

Как уже упоминалось в предыдущем ответе, вы также можете использовать медиа-запросы для изменения размера формы в разных разрешениях.

ОБНОВИТЬ

Также можно изменить размер фонового изображения при изменении размера экрана. Этого можно добиться, установив свойство background-size снова на 100%. Вот отличный ресурс, как его использовать.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню