Позиционирование элементов с использованием CSS относительно фонового изображения при 100% на всех разрешениях

Question

Я пытаюсь настроить CSS моего сайта для размещения всех элементов на моих веб-страницах относительно фона. Однако я не могу понять это. Я попытался использовать относительный контейнер со 100% шириной и высотой ... все же разные разрешения отображают разные позиции для ссылок и т. Д.

Я также попытался просто использовать HTML для привязки изображений в навигационной панели и для некоторых причина, по которой ссылка на изображение не работает.

Вебсайт http://www.aaronbcarver.com, если вы хотите увидеть код.

Answer 1

Прежде всего,

1. Ваше фоновое изображение имеет очень высокое разрешение, которое 3510px * 2550px уменьшить разрешение и качество изображения процент (около 80%) с помощью Photoshop или любой редактор изображений, который вы хотите.
2. Попробуйте отделить CSS от основных файлов. Вы можете связать свой CSS с вашим index_carousel.html. См. here для справок
3. Я предполагаю, что вы говорите о мобильном реагировании. Если так, используйте рамки CSS. Одна из самых популярных рамок - Bootstrap. Загрузите его библиотеки и узнайте больше о его структурах.