Making Background Images "Breathe"

Making background images animate to scale up and down, in effect 'breathe' is an elegant, eye-catching technique to add to any site or landing page. For the full effect of what I mean by 'breathe', check out the home page at woofstr.

Here's how to do it.

First, Structure the JSX in your Component.js

Note the use of the class name 'pseudo-child' to describe what will in the end appear to be a child, but is actually a sibling, of the background div. The pseudo-child must be a sibling of the background div to avoid the animation effect. And it must be housed in a container in order to float and center it over the background animation with flexbox and z-index settings.

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="background"></div>
      <div className="pseudo-child-container">
        <h2 className="pseudo-child">Breathe</h2>
      </div>
    </div>
  );
};

Set the Background Image

In your styles.css file, apply background image styling to the background div.

.background {
  background-image: url(https://res.cloudinary.com/dm89xfnl4/image/upload/v1633802207/erol-ahmed-aIYFR0vbADk-unsplash_r6nmc8.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Apply Breathe Animation to Background

Create the breathe keyframes with a subtle transform of scale back and forth by a barely-noticeable percentage. Apply breathe to the background class's animation property.

@keyframes breathe {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.04);
  }
}

.background {
  background-image: url(https://res.cloudinary.com/dm89xfnl4/image/upload/v1633802207/erol-ahmed-aIYFR0vbADk-unsplash_r6nmc8.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: breathe infinite alternate ease-in-out 8s;
}

Apply Pseudo-Child and Container Styling

Note the use of z-index and flexbox.

.pseudo-child-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.pseudo-child {
  z-index: 10;
  color: white;
  font-family: 'Montserrat', Impact, sans-serif;
  font-size: 54px;
}

The End Result

The result is a subtle but dramatic effect you can use with any headline. Play with different images, or experiment with containing the image/pseudo-child combo to a card div on the page instead of the full page background, perhaps as a preview image for a blog post in a table of contents. Below is the full working example in a CodeSandbox.