Growing & Shrinking Background Image in Divi


Check out our new pivotal effect to add some sweet growing + shrinking action to your site to spice things up. We’ll even walk you through it.

This tutorial will help you with growing and shrinking background images in Divi.

This gives background images a great fade in/ fade out effect. Have some fun on hover effect changing the background position so that the image moves and learn to use the CSS multiple background so you can stack a color overlay on the background image as well.

Check out the video above to learn how to implement the pivotal effect in Divi today! We use ANTHEM in the video for demo purposes, but this will work on any Divi site.

step 1: watch the video…carefully


step 2: make “section module settings” background colors transparent


step 3: Go to section module settings > custom CSS

Everything should show up as transparent.

step 4: add pivotal code in (11:00)

gimme that code!
/* ==========================================================================
   ========================================================================== */
.pivotal:before {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center;
  /*background-position: left bottom;*/
  background-size: cover;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
@media only screen and (min-width: 767px) {
  .pivotal {
    overflow: hidden;
  .pivotal:hover:before {
      transform: scale(1.1);
      /*background-position: right top;*/

  background: linear-gradient(
  rgba(78, 78, 86, 0.25),
  rgba(78, 78, 86, 0.25)
  ), url("");

step 5: mess around with the speed.

We recommend “.5”

step 6: change the positioning of the background (17:00 – 21:00)

step 7: tinting images (22:00 – End)


You can find the “Gradient” app here! Play ’round with the tinting, positioning, and timing!

Stay Fly,
Superfly Squad

You can use this trick on any Divi site! But if you like the demo we used, it’s called “ANTHEM” and it’s pretty fly if we may say so ourselves…

  1. Logan Ramirez

    Solid as always, John! Thank you for putting this out there. I really appreciate the transparency of your tutorials and the creativity of BeSuperFly in general.

    Regarding the ‘content’ requirement for pseudo classes, according to the spec (link below) the pseudo class will not generate if it’s missing – so setting the empty string ensures the pseudo class is available to use at all.

    • John Wooten


      Thanks for the info and props! =)

  2. Betty

    Is there a Gradient app for Adroid or web browser or Windows 10? I do have Anthem and Divi. Just want to change the colors.

    • Jake Kramer

      Hey Betty, we haven’t used a Gradient app for Windows ourselves, but you can try this link from any browser. If not, feel free to just adjust the code and set the colors manually. This is the code that the Gradient app spits out:

      background-color: #145381;
      background-image: -webkit-gradient(linear, left center, right center, from(rgb(20, 83, 129)), to(rgb(178, 88, 88)));
      background-image: -webkit-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: -moz-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: -o-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: -ms-linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      background-image: linear-gradient(left, rgb(20, 83, 129), rgb(178, 88, 88));
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#145381′, EndColorStr=’#b25858′);

  3. Lilly

    Sweet tutorial, John. Thanks for another killer addition to Divi!


Submit a Comment

Your email address will not be published. Required fields are marked *