Зафиксировать (совместить) слои с фоновой картинкой

[slo_nik]

Доброй ночи,

 

Возникла проблема с совмещением кучи мелких слоёв и фоновой картинки.

Вот пример

При наведении курсора на белую плашку с номером корпуса здание на фоновой картинке "подсвечивается".

Если разрешение монитора 1366*768, то всё смотрится хорошо. Если разрешение менять в большую или меньшую сторону, то белые плашки съезжают со своих мест. Фоновая картинка растягивается под размер монитора.

Как зафиксировать белые плашки, чтобы они оставались на своих местах вне зависимости от разрешения монитора?

Помогите, пожалуйста, решить проблему.

Заранее благодарю откликнувшихся.

 

[TuTaHuKk]

Сделайте так чтоб фоновая картинка не менялась под размер монитора! Пропищите блоку с фоновой картинкой фиксированную ширину!

[slo_nik]

Сделайте так чтоб фоновая картинка не менялась под размер монитора! Пропищите блоку с фоновой картинкой фиксированную ширину!

 

Фиксированная ширина не подходит, надо, чтобы фон масштабировался под монитор. 

[Great Rash]

Под какие браузеры нужна работоспособность?

[slo_nik]

Под какие браузеры нужна работоспособность?

Под chrome, mozilla, opera и всеми любимый ie

[Great Rash]

Версия ИЕ самая последняя?

[slo_nik]

Версия ИЕ самая последняя?

ie 9+

[Great Rash]

В таком случае можете смело использовать SVG.

[slo_nik]

В таком случае можете смело использовать SVG.

 

Благодарю, буду разбираться...

Но есть ещё один момент.

При наведении на плашку появляется подсветка самого здания. Это тоже изображение. Как в этом случае сохранить пропорции изображения подсветки?

[Great Rash]

Да без проблем вообще.

[slo_nik]

Да без проблем вообще.

 

Благодарю, всё получилось, метки не съезжают и прекрасно масштабируются. 

Но вот с фоновой картинкой осталась проблема. Почему-то она меньше по ширине чем указано в параметрах. Должно быть 1664, а на деле на 150 px меньше.

При разрешении экрана 1920х1080 справа остаётся пустое место, картинка не растягивается полностью.

Из-за чего это может быть?

Edited April 21, 2015 by slo_nik

[Great Rash]

Извините, я гадать на расстоянии не умею

[slo_nik]

Извините, я гадать на расстоянии не умею

 

Извините, забыл за ссылку)

Вот сайт в сборе http://test.roganov.info/nc/select.html

Если установить разрешение 1920х1080, то справа будет виден старый фон.

[Great Rash]

Ну у меня в Хроме всё нормально, но я заметил, что у вас стоит max-width для блока #main-content, может в этом дело?

[slo_nik]

Ну у меня в Хроме всё нормально, но я заметил, что у вас стоит max-width для блока #main-content, может в этом дело?

Так дело в том, что я смотрю тоже в Хроме) и  в Мозеле и Опере так же.

Убрал старый фон, теперь хорошо видно белую полосу справа, шириной около 150px. 

Измерил блок с svg - 1500px, а в параметрах 1664px.

[Great Rash]

А ну я кажись понял в чем дело. У вас высота меньше чем 1080 пикселей, и получается, что для того, чтобы блок сохранил пропорции он должен ужаться по одной из осей. в вашем случае это ось X. Логично, что в квадрат прямоугольник вписать не получится не так ли?

[slo_nik]

А ну я кажись понял в чем дело. У вас высота меньше чем 1080 пикселей, и получается, что для того, чтобы блок сохранил пропорции он должен ужаться по одной из осей. в вашем случае это ось X. Логично, что в квадрат прямоугольник вписать не получится не так ли?

 

Размер картинки 1664х1080, проверил ещё раз.

[Great Rash]

Да, но после масштабирования он же меняется.

 

Нормально:

http://clip.corp.mail.ru/clip/m0/1429615191-clip-345kb-FJ4708Kso8b5.jpg

 

Плохо:

http://clip.corp.mail.ru/clip/m0/1429615165-clip-290kb-SNrRgbwjZL9l.jpg

 

Сравните, я всего лишь поменял высоту окна.

[slo_nik]

Да, но после масштабирования он же меняется.

 

Нормально:

http://clip.corp.mail.ru/clip/m0/1429615191-clip-345kb-FJ4708Kso8b5.jpg

 

Плохо:

http://clip.corp.mail.ru/clip/m0/1429615165-clip-290kb-SNrRgbwjZL9l.jpg

 

Сравните, я всего лишь поменял высоту окна.

 

Так я за это и говорю. Вот как теперь растянуть на всю ширину блока?

[Great Rash]

Если вы хотите сохранить пропорции то никак. Я же пишу: вы пытаетесь вписать квадрат в прямоугольник. Как вы его впишете не растянув?

[slo_nik]

Если вы хотите сохранить пропорции то никак. Я же пишу: вы пытаетесь вписать квадрат в прямоугольник. Как вы его впишете не растянув?

 

Вот как получается...

За счёт адресной строки браузера и вкладок получается полоса))) Если перейти в полноэкранный режим, то всё отлично смотрится, без полосы)))

[Great Rash]

Рассчитывать на то, что у пользователя будет такая же высота окна как у вас, не стоит.

[slo_nik]

Рассчитывать на то, что у пользователя будет такая же высота окна как у вас, не стоит.

Я понимаю, что не стоит...

Попробую увеличить саму картинку...

 

Рассчитывать на то, что у пользователя будет такая же высота окна как у вас, не стоит.

Я понимаю, что не стоит...

Попробую увеличить саму картинку...

 

Ничего не получилось)))

[slo_nik]

Рассчитывать на то, что у пользователя будет такая же высота окна как у вас, не стоит.

 

Благодарю за Ваши подсказки, они мне очень помогли.

С белой полосой вроде тоже разобрался, пришлось повозиться с css, но сейчас полосы нет при разных разрешениях. Всё дело было в width и height, при помощи @media screen настроил разные значения для разных разрешений экрана.

 

Ещё раз благодарю за подсказки.