0

so I am trying to move a child div with background image but background position no matter how much i set isn't moving, this is my code in html: 

<div className="review-dots-container">
  <div className="review-dots-purple" />
</div>

and my css:

.review-dots-container {
  width: 100%;
  height: 100%;
  position: relative;
  .review-dots-purple {
    background-image: url('./scss/img/dots-purple@1x.png');
    height: 368.08px;
    width: 368.12px;
    position: absolute;
    background-position: 70% 80%;
    @include mediaQuery(768px) {     
      height: 368.08px;
      width: 112px;
    }
  }
}

so the parent has inherit the width and height, it's positioned to relative with the child div with background image positioned to absolute, but the image is not moving anywhere no matter how much i set, even if it's

background-position: 120% 180%;
gpbaculio
  • 5,693
  • 13
  • 60
  • 102
  • first you cannot have more than 100% on the background-position, then if you background is set to auto size, all the background-position % values are equivalent. change the background-size and see what happen – Temani Afif Jun 13 '18 at 15:59
  • @TemaniAfif changed it from 1% to 100%, still, the child with background image not moving anywhere, i was expecting it to move since it's parent container has larger width and height, – gpbaculio Jun 13 '18 at 16:01
  • from 1% to 100% all the background-position are equivalent if the size is 100%, so check the size of the background ... change the background-size to see the effect – Temani Afif Jun 13 '18 at 16:02
  • @TemaniAfif i was setting the width and height from the child cause it's how i want the image sized, so you are suggesting i cropped the image to the size i want to move it? then the height and width with it, is for the space to move for background position? – gpbaculio Jun 13 '18 at 16:05
  • 1
    I am explaining you how the background-position works with % values :) ... If the background-image is set to 100% width of its container ALL the values used in % are the same, you can put any value you won't see any difference ... so to see a difference you need to change the background-size or use px value instead of % – Temani Afif Jun 13 '18 at 16:07
  • i don't know why but using pixels worked, while percentage didn't. – gpbaculio Jun 13 '18 at 16:11
  • 1
    check the dup and this : https://www.sitepoint.com/css-using-percentages-in-background-image/ – Temani Afif Jun 13 '18 at 16:14

0 Answers0