Published on

Making Background Images "Breathe"

Authors
and breath in neon over wall of plants

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.

Edit
youthful-snyder-74ox9