CODEWITHSUNDEEP
htmlcss
anderlaini
anderlaini

Reputation: 1831

css - how to use part of image as background

I'm trying to use part of an image as background for a div.

It works for my fixed width screen.

desired output

But when I resize the screen width, it loses correct position, showing other parts of image.

behavior while resizing

Someone can help?

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>

Upvotes: 2

Views: 722

Answers (2)

Temani Afif
Temani Afif

Reputation: 273990

Don't use percentage. Keep the size with pixel, enable the repeat then adjust the position like you want:

.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>

You can also remove the size completely and the default size of the image will be used:

.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>

Upvotes: 2

Amit Pandey
Amit Pandey

Reputation: 314

This should do the trick, i have changed the background-size and background position property, with this you can make some adjustments to achieve what you want.

  .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
    }
  }
}

Upvotes: 1

Related Questions