askvity

How Do I Make the Background of an Image Move in CSS?

Published in CSS Background Animation 4 mins read

You can make a background image move or change position in CSS primarily by controlling the background-position property over time, often in combination with other CSS features like transitions or animations.

As stated in the reference, the background-position property in CSS allows you to move a background image (or gradient) around within its container. This property is fundamental to changing where your background image sits.

Understanding background-position

The background-position property sets the initial position of each background image within a background positioning area. It can take one or two values.

  • One Value: Sets both the horizontal and vertical position. A second value defaults to center.
  • Two Values: The first value sets the horizontal position, and the second sets the vertical position.

You can use different types of values:

  • Keywords: Simple, intuitive terms like top, bottom, left, right, and center. Combinations are also possible (e.g., top left, bottom right).
  • Length values: Specify an exact distance from the top/left edge of the container (e.g., 10px 20px). As the reference notes, examples include 100px 5px.
  • Percentages: Position the image relative to the size of the container. 0% 0% is the top-left corner, while 100% 100% is the bottom-right corner. 50% 50% is the center. The reference mentions examples like 100% 5%.

Here's a quick look at how values work:

Value(s) Description
center Image is centered horizontally and vertically.
top left Image is in the top-left corner.
50px 100px 50px from left, 100px from top.
25% 75% 25% from left, 75% from top.
bottom center Centered horizontally, at the bottom.

Making it Move (Animation & Effects)

While background-position itself sets a static location, changing this value over time or based on user interaction is how you create the illusion of movement. Here are common CSS techniques:

  1. CSS Transitions: Animate the change in background-position smoothly when a state changes, such as hovering over an element.

    .moving-bg-on-hover {
  background-image: url('your-image.jpg');
  background-size: cover; /* Or desired size */
  background-position: center center; /* Starting position */
  transition: background-position 0.5s ease; /* Animate background-position over 0.5s */
}

.moving-bg-on-hover:hover {
  background-position: top left; /* Ending position on hover */
}
    • Insight: This is great for simple, interactive movements triggered by user actions.

  2. CSS Animations (@keyframes): Create more complex, continuous, or timed movements using keyframes.

    @keyframes slideBackground {
  0% {
    background-position: 0% 0%; /* Start top-left */
  }
  50% {
    background-position: 100% 50%; /* Move right and down */
  }
  100% {
    background-position: 0% 0%; /* Return to start */
  }
}

.animated-bg {
  background-image: url('your-image.jpg');
  background-size: cover;
  animation: slideBackground 10s infinite linear; /* Apply the animation */
}
    • Insight: Use @keyframes for looping effects, non-linear movements, or animations not tied to user interaction.

  3. Parallax Effect (using background-attachment: fixed): While not strictly animating background-position, the background-attachment: fixed property makes the background image static relative to the viewport. As the user scrolls, the foreground content moves over the fixed background, creating a simple parallax illusion of movement.

    .parallax-section {
  background-image: url('your-image.jpg');
  background-size: cover;
  background-attachment: fixed; /* Image stays fixed relative to viewport */
  background-position: center center; /* Position it initially */
  height: 400px; /* Give the section height */
  /* Add other styles like padding, color, etc. */
}
    • Insight: This is an easy way to create a common "moving" background effect driven by scrolling.

In summary, to make a background image move in CSS, you utilize the background-position property to define the image's location and then employ CSS transitions, animations, or background-attachment: fixed to change that position over time or based on scroll, creating the visual effect of movement.

Related Articles