background-size сдвигает изображение

Я использую skrollr для создания эффекта масштабирования, очень похожего на это.

Фоновое изображение, которое я использую, представляет собой SVG, а эффект масштабирования применяется путем изменения размера фона с очень высокого значения (> 2500%) до 100%. Теперь все работает нормально, ожидайте, что свойство css «размер фона» ограничено. Я не могу применять значения выше ~ 2600%. Если я это сделаю, в зависимости от браузера фоновое изображение будет смещено или вообще не будет отображаться.

Возникающая проблема заключается в том, что для фиксированного значения (например, 2500%), в зависимости от размера и разрешения экрана пользователя, изображение может отображаться неправильно (или вообще не отображаться, как указано выше). Есть ли способ рассчитать, в зависимости от размера и разрешения экрана, каков максимально возможный размер фона, чтобы изображение отображалось правильно?

JSFiddle

CSS:

.bg-1 {
    background-color:black;
    background-image:url('http://imgh.us/world-map_sw-r.svg');
    background-size:3000% auto; /* change this to something (really) big, e.g. 7000 */
    background-position-y:43.55%; /* this number is specific to the svg */
    background-position-x:52.5%; /* this numbers is specific to the svg */
    background-repeat:no-repeat;
}

HTML:

<section class="content bg-1">
  <h1>Lorem ipsum dolor sit amet</h1>
</section>

html css background-image background-size
person dabe    schedule 18.01.2016    source источник
comment
Можете ли вы опубликовать JSFiddle? Кроме того, какой браузер и версию вы используете?   -  person Kaspar Lee    schedule 18.01.2016
comment
я добавил JSFiddle к вопросу вместе с основным кодом. похоже, проблема связана с svg-изображениями. Я использую Google Chrome (v47.0.2526.111) и Safari (v8.0.7 (10600.7.12))   -  person dabe    schedule 18.01.2016

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте использовать px вместо %, потому что % имеет максимальное значение 100.

Вот мой JsFiddle.

person Naman    schedule 18.01.2016