Skip to main content
CSS is fun and cool and I like it.
Article

Moving Backgrounds With Mouse Position

Let's say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this:

<div class="module" id="module"></div>

And you toss a background on it:

.module {
  background-image: url(big-image.jpg);
}

You can adjust the background-position in JavaScript like this:

const el = document.querySelector("#module");

el.addEventListener("mousemove", (e) => {
  el.style.backgroundPositionX = -e.offsetX + "px";
  el.style.backgroundPositionY = -e.offsetY + "px";
});
Read article
Article

Focusing a `background-image` on a Precise Location with Percentages

Let's say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The rest is cropped away, outside the element.

Now you want to move that background-image such that you're focusing the center of the element on a specific point in it. You also want to do that with percentage values rather than pixels. We're going to have to get clever.… Read article

Almanac

background-position

The background-position property in CSS allows you to move a background image (or gradient) around within its container.

html {
  background-position: 100px 5px; 
}

It has three different types of values:

  • Length values (e.g. 100px 5px)
  • Percentages (e.g. 100% 5%)
  • Keywords (e.g. top right)

The default values are 0 0. This places your background image at the top left of the container.

Length values are pretty simple: the first value is the horizontal position, second value is … Read article

icon-link icon-logo-star icon-search icon-star