css - как использовать часть изображения в качестве фона

Question

Я пытаюсь использовать часть изображения в качестве фона для div.

Это работает для моего экрана с фиксированной шириной.

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

Кто-то может помочь?

HTML

<div class="game">
  <div class="slice top_estrada"></div>
</div>

CSS

.game{
  display:block;
  width:100%;
  .slice{
    display:block;
    width:100%;
    background-image:url('/assets/maps/tilemaps/mymap.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    &.top_estrada{
      background-position:0 -125px;      /* <========= HERE */
      height:88px;                       /* <========= AND HERE */
    }
  }
}

.game {
  display: block;
  width: 100%;
}

.game .slice {
  display: block;
  width: 100%;
  background-image: url('https://i.imgur.com/rdx8FHt.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.game .slice.top_estrada {
  background-position:0 -125px;      /* <========= HERE */
  height:88px;                       /* <========= AND HERE */
}

<div class="game">
  <div class="slice top_estrada">
    top_estrada
  </div>
</div>

Answer 1

Не использовать проценты. Сохраните размер в пикселях, включите повтор, затем отрегулируйте положение, как хотите:

.game {
  display: block;
  width: 100%;
}

.game .slice {
  display: block;
  width: 100%;
  background-image: url('https://i.imgur.com/rdx8FHt.png');
  background-size: auto 350px;
}

.game .slice.top_estrada {
  background-position:0 -155px;      
  height:88px;                       
}

<div class="game">
  <div class="slice top_estrada">
    top_estrada
  </div>
</div>

Вы также можете полностью удалить размер, и будет использован размер изображения по умолчанию:

.game {
  display: block;
  width: 100%;
}

.game .slice {
  display: block;
  width: 100%;
  background-image: url('https://i.imgur.com/rdx8FHt.png');
}

.game .slice.top_estrada {
  background-position:0 -155px;      
  height:88px;                       
}

<div class="game">
  <div class="slice top_estrada">
    top_estrada
  </div>
</div>

Answer 2

Это должно сработать, я изменил свойства background-size и background position, с этим вы можете внести некоторые корректировки для достижения желаемого.

  .game{
  display:block;
  width:100%;
  .slice{
    display:block;
    width:100%;
    background-image:url('https://i.imgur.com/rdx8FHt.png');
    background-repeat: no-repeat;
    background-size: 100%;
    &.top_estrada{
      background-position:0 60%;      // <========= HERE
      height:88px;                       // <========= AND HERE
    }
  }
}