Отображение изображений на автоматически изменяющемся фоне с помощью CSS

Question

Я довольно новичок в CSS, я похитил немного кода и заставил его работать для меня так, как я хочу, я приобрел немного понимания после того, как попробовал так много разных способов сделать то, что я хочу, но немного растерялся.

Я хочу сделать именно так, как написано в заголовке, карту-изображение, хотя я и пытаюсь реализовать автоматическое изменение размера. Очевидно, я стараюсь, чтобы мой сайт выглядел прилично в большинстве разрешений без ущерба для дизайна, который я хочу. Сайт с моим кодом пока ниже:

http://blunderphonics.0sites.net

Я бы сделал это со старым html-способом, но мне не нужны какие-либо границы, которые, по-видимому, этого не позволяют (так как вы не можете отобразить карту с фоном).

Пожалуйста, помогите, это сводит меня с ума

Answer 1

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

Однако я бы предложил несколько тегов для каждой из этих областей. Установите каждую ссылку для отображения: блок и размер и расположите их в процентах (как вы делаете в классе "bg").

Например, ссылка для этого верхнего заголовка, охватывающая всю страницу, может быть оформлена примерно так:

#home-link {
    display:block;
    width:90%;
    height:10%;
    position:absolute;
    top:2%;
    left:5%;
}

Это всего лишь пример, и эти цифры ни в коем случае не являются точными. Я просто использую их в демонстрационных целях. Что вы хотели бы сделать, это сделать некоторые измерения на этом изображении и выяснить размеры и позиции этих ссылок в процентах от всего документа. Например, если ссылка составляет 100 пикселей сверху, а изображение имеет высоту 1000 пикселей, то для свойства top этой ссылки будет установлено значение 10%.

Надеюсь, это поможет.