- Published on
Making Background Images "Breathe"
- Authors
- Name
- David Rhodes
- @rhodesdav
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.