A colour-changing background in Divi

In this article, we will see how to easily get a background that changes colour, simply with CSS code. Here, no Javascript or hands in the code ! You'll see that with this trick, you'll get a super fun coloured effect!

To better understand, watch this video which shows the final result of this colour changing background:

So what do you think? Does it give you some ideas? Let's find out how...

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

1 - How do I get a background that changes colour in Divi?

The following method can be easily integrated into Divi but can also be used in any WordPress theme or HTML page.

First, you need to add a page and activate the Divi Builder (or edit a page that already uses the Divi Builder).

You will add a STANDARD SECTION (blue box in the image below).

In the LINE (green box in the image below), add a TEXT MODULE (pink box in the image below). You can write any text you like, for my example I wrote "just fun".

Next, make sure you set the background of the LINE (green colour) to 100% transparency. This will allow the background colour of the STANDARD SECTION to show through.

Finally, edit the STANDARD SECTION, go to the ADVANCED tab and add a CSS class. For this example I have used the class fun-color.

Now you can save your page (your changes) and go to the Appearance > Customise > Additional CSS tab to enter these few lines of code:

/* couleurs changeantes */

.fun-color {
-webkit-animation: random 15s infinite;
animation: random 15s infinite;
}

@keyframes random {
15% { background-color: #e3ff87; } 
30% { background-color: #ff7c96; } 
45% { background-color: #6ffffa; }
60% { background-color: #ef6b30; } 
75% { background-color: #bf69b1; } 
}

That's it! If you refresh your page you should see a background that changes colour.

Need more resources on Divi? Visit the ElegantTheme blog which is full of ideas and tutorials!

2 - Some explanations on this CSS code...

To better understand and appropriate this piece of codeHere are some explanations that will allow you to modify it as you wish:

1. The text between /* and */ is a CSS comment. This is not taken into account by the browser and helps you to find your way around your code when you edit it later. This is optional and you can change the text without any problem.
2. The .fun-color is the call to the CSS class. The CSS code that follows this call will only be applied to HTML elements that use this class
3. 15s is the duration of the colour change. If you increase it, the colour change will be slower, if you decrease it, it will be faster.
4. The % percentages will need to be adjusted according to the number of colours you wish to use. If you reduce the number of colours, you will increase the % of each colour. If you increase the number of colours, you will reduce the % of each colour.
5. #e3ff87 is the hexadecimal code of a colour in HTML. To choose your own colours and know their code : visit this page.

3 - What can we do with this custom code?

The CSS code is applied to an element. For my example, I used a CLASS (.fun-color) which I applied to a section of Divi but you could very well apply this code to an existing class or HTML ID in Divi.

For example, in the video below, I have applied this code to the menu of my Divi site :

It's very simple, I used the menu ID (#main-header) as you can see in the screenshot below:

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

4 - Going further with Divi's colours

I'm sure this gives you some amazing ideas for your current or future projects... Am I wrong?

If not, here is a reading list you might like:

• Examples of colourful sites made with Divi
• Match the colours of your WooCommerce shop
• How do I apply a different background colour to each page?
• How to define different colours for different authors?