Solution 1 :

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>

Solution 2 :

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

Problem :

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>

Comments

Comment posted by ROOT

its not clear what issue is, can you create a snippet with HTML and CSS that show the issue.

Comment posted by Rishab Tyagi

You can crop the image and then apply as background.

Comment posted by anderlaini

added jsfiddle example

Comment posted by anderlaini

my goal is to show only the road, not other parts of image

Comment posted by Amit Pandey

it is because of background size

By

Leave a Reply

Your email address will not be published. Required fields are marked *