Фиксированное положение фонового изображения внутри div

Ответ 1

После некоторых попыток я вышел с этим, но это решение JS, все равно будет очень рад, если кто-нибудь взломает его с помощью чистого CSS.

Ссылка на скрипт https://jsfiddle.net/w4hz4cqf/31/

Немного изменил код CSS:

    .main
    {
      min-height: 1000px;
      width: 500px;
      margin: 0 auto;

    }

    .col1
    {
      width: 150px;
      min-height: 800px;
      display: inline-block;
      float: left;
    }

    .col2
    {
      width: 70%;
      min-height: 800px;
      display: inline-block;
    }

    .row1 .col1
    {
      background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/24-hours-phone-icon.png") !important;
        //background-position: left !important;
        background-repeat: no-repeat !important;
        background-size: 100px 100px !important;
        background-attachment: fixed !important;
    }

    .row2 .col1
    {
        background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/abs-icon.png") !important;
        background-position: left !important;
        background-repeat: no-repeat !important;
        background-size: 100px 100px !important;
        background-attachment: fixed !important;
    }

    .row3 .col1
    {
        background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-down-icon.png") !important;
        background-position: left !important;
        background-repeat: no-repeat !important;
        background-size: 100px 100px !important;
        background-attachment: fixed !important;
    }

Добавлен код JS:

    jQuery(document).ready(function(){
      backgroundImageSize = 100;

      elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 
      for(ind = 0; ind < 3; ind++) {
        elem[ind].getBoundingClientRect();

          elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
      }

      var width = $(window).width();
      $(window).on('resize', function(){
         if($(this).width() != width){
            width = $(this).width();
            elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 

            for(ind = 0; ind < 3; ind++) {
              elem[ind].getBoundingClientRect();
              elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
            }
         }
      });
    });

Ответ 2

К сожалению, это просто артефакт о том, как фиксированное позиционирование работает в CSS, и нет никакого способа обойти его в чистом CSS - вы должны использовать Javascript.

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

Чтобы обойти это, вам в основном нужно использовать background-attachment: прокрутка и привязка прослушивателя событий к событию прокрутки в JS, который вручную обновляет положение фона относительно того, как далеко прокручивалось окно, чтобы имитировать фиксированное позиционирование но все равно вычисляют размер фона: обложка относительно элемента контейнера, а не область просмотра.

Ответ 3

Попробуйте это

background-size: 29.9% 100% !important;

Fiddle