Moving an image up, down, left, right inside a div?

HTML & CSS
1

How would this be achieved?

So, basically, the circle would stay in place, while only the image itself would be able to be moved up, down, left, right.

code: https://jsfiddle.net/g1epcdau/

.grid {
  width: 150px;
  height: 150px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "r1c1 r1c2 r1c3 r1c4 r1c5"
    "r2c1 r2c2 r2c3 r2c4 r2c5"
    "r3c1 r3c2 r3c3 r3c4 r3c5"
    "r4c1 r4c2 r4c3 r4c4 r4c5"
    "r5c1 r5c2 r5c3 r5c4 r5c5";
  border-radius: 50%;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  background-image: url("https://via.placeholder.com/300");
  background-size: cover;
  background-repeat: no-repeat;
}

.i1 {
  grid-area: r1c3;
}

.i2 {
  grid-area: r2c2;
}

.i3 {
  grid-area: r2c4;
}

.i4 {
  grid-area: r3c1;
}

.i5 {
  grid-area: r3c3;
}

.i6 {
  grid-area: r3c5;
}

.i7 {
  grid-area: r4c2;
}

.i8 {
  grid-area: r4c4;
}

.i9 {
  grid-area: r5c3;
}

.item {
  margin: auto;
 width: 18px;
}

<div class="grid circle">

  <svg class="item i1" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i2" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i3" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i4" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i5" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i6" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i7" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i8" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

  <svg class="item i9" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" />
  </svg>

</div>
2

Ilm not really sure what you are asking but background images are placed using background-position.

3

If an image is 1000 x 500 or something like that.

Being able to move, maneuver it to a certain spot within a div.

4

well then what @PaulOB said is what you need. Notice that background-position takes some parameters for adjusting left/top positions. All you need to do then is tie those positions to your mouse movement.

For instance, if I click the background and hold then drag up 20px, you will move your backgrounds position up 20px.

I hope you get the idea. :slight_smile:

1 Like
5

Would this work, or no?

6

That could be another way to do it, sure. I think the only problems you might run into with that is if there is images on top of the item you are moving. You would have to make sure you put them all into a container and then move the container. Where the background position solution would move the background and leave everything on top of the background untouched

But I could be wrong, I haven’t tested that.

1 Like
7

That applies to foreground images not background images - just in case you didn’t realise :slight_smile:

8

In your example the background image is 300px by 300px natural size but you have made it background-size:cover. That means the image is scaled to 150px x 150px. If you move the background-position of that image then you will get a gap inside the border radius because the element is only 150px wide. That will have the effect of a straight line appearing rather than a circle.

If you removed the background-size:cover then you could move the image around and show parts of the larger 300px x 300px image.

Here is a screenshot of that happening where I have moved the text of the image to the centre position by using a background-position of -75px -75px.

Screen Shot 2021-06-30 at 19.15.34
Screen Shot 2021-06-30 at 19.15.34444×437 48.6 KB
.

it is still unclear what your end ‘use case’ is supposed to be?

9

When set to:

background-position: bottom 50px left 50px;

How come the image goes up and right?

code: https://jsfiddle.net/pnxosyh8/1/

10

Isn’t that obvious?

You are moving the image 50px up from the bottom and 50px from the left.

Why didn’t you use the simpler system I gave you where 0,0 is left top? e.g. (background-position:50px -50px) is equivalent to what you wrote (background-position: bottom 50px left 50px;).

2 Likes
11

Now we know, that was the code I was looking for.

background-position:

12

That’s the link I posted in the very first answer to your question :slight_smile:

4 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.