How to Add and Customize Background Images on an Exported Slides Template
The Slides app has controls that enable you to customize the slides added to your template. You can edit the content of each slide using the edit button shown below:
You can also remove or add a background image to the slide with the third control.
You might have already exported your template and want to make some quick changes to some slides without having to go back to the Slides app, make the changes there and download the template again. This article will show you how to do that — specifically, how to add or customize the background image.
Changing a Background Image
Let’s take a look at how you can change the background image of a slide in your template. Below is the slide that we’ll change the background image of.
Below is its code.
<!-- Slide 1 (#20) --> <section> <div> <div> <div> <div> <h1>Heart of the image</h1> <p><span>You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.</span></p> <a>Get Started for Free</a> </div> </div> </div> </div> <div style="background-image:url(assets/img/background/img-20.jpg)"></div> </section>
To change the background image, simply replace the link to the image with a link to your new image; you can use an internal link (/path/to/image.jpg ) or an external one().
<section> ... <div style="background-image:url(assets/img/background/new-bg-img.jpg)"></div> </section>
If you refresh the page, you should be able to see the new image. Any animations that were active on the slide will still be working.
Adding a Background Image
You might have exported a template with slides that have no background image and you may want to add a background image on one or more slides. Let’s see how to do this.
Below is the slide that we’ll add a background image to.
Below is the slide’s code.
<section> <div> <div> <div> <div> <h1>Maui Hotel Or Maui Condo</h1> <p><span>One of the best ways to make a great vacation quickly horrible is to choose the wrong accommodations for your trip.</span></p> <div> <a>Get Started</a> <div data-popup-id="21-2"><i>play_circle_filled</i>Watch the Video</div> </div> </div> </div> </div> </div> </section>
To add a background image to the slide, add a .background div just below the .content div of the section.
<section> <div> ... </div> <div style="background-image:url(assets/img/bg-img.jpg)"></div> </section>
The background class positions the div so that it fills up the entire viewport (user’s visible area of a web page) and then we add a style to the div that adds a background image to it.
If you refresh the page, you should see the background image.
The background image looks great, but the problem is that the foreground text isn’t very readable. We should change its color to create more contrast between the text and the background.
The section has a whiteSlide class, which gives its content the color #202020 and a background of #fff . To get white text, all you have to do is remove this class.
<section> <div> ... </div> <div style="background-image:url(assets/img/bg-img.jpg)"></div> </section>
Now there is more contrast between the foreground text and the background.
To finish off, let’s add some animation effects to the background image. We add the classes fade-6 and kenBurns to the section.
<section> <div> ... </div> <div style="background-image:url(assets/img/bg-img.jpg)"></div> </section>
We’ve defined some animation effects that can be used to animate the background images of your slides. There are four effects that you can choose from: kenBurns , kenBurns zoomin , scenic and parallax .
You can also fade a background image or color to varying degrees to achieve different blending effects. You can use the class fade-X to vary the amount of opacity of a background color or image used in your design. X is the amount of fade and its value goes from 1 to 9 .
Using Colors for the Background
You can also use colors for your background instead of images. To use a color as a background image, you can either use a set of predefined color class names on the .slide element (the available color classes can be found here), or you can add a style to the background layer and specify the color there.
Below, we add the color class deepPurple to the slide.
<section> <div> <div> <div> <div> <h1>Heart of the image</h1> <p><span>You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.</span></p> <a>Get Started for Free</a> </div> </div> </div> </div> </section>
You can see the resulting slide below.
To make the navigation indicators on the right side of the slide white, remove the whiteSlide class.
<section> ... </section>
Now the navigation indicators are white.
If you want to use a color that isn’t one of the defined color classes, then you can add a style directly on the background layer and set the class there.
<section> <div> ... </div> <div style="background:#313a4e"></div> </section>
Remember to remove the whiteSlide class if you want to have white text and navigation indicators.
Using Gradients for the Background
Other than images, you can also set a gradient that will be used for the background. Technically speaking, gradients are just another form of a background image. The difference is that the browser makes the image for you.
There are different types of gradients you can use: linear-gradient, radial-gradient, conic-gradient, repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient.
Here’s an example of a linear gradient that goes from #2F1893 to white .
<section> <div> ... </div> <div style="background: linear-gradient(#2F1893, #ffffff)"></div> </section>
Here’s the result of that:
You can provide a direction for the gradient:
<section> <div> ... </div> <div style="background: linear-gradient(to top, #2F1893, #ffffff)"></div> </section>
Now it starts from the bottom to the top.
Below, we use a radial gradient:
<section> <div> ... </div> <div style="background: radial-gradient(circle, #2F1893, #ffffff)"></div> </section>
Here’s the result:
The examples above use only one gradient, but you can also layer multiple gradients on top of each other. You can create some pretty amazing patterns with this technique. You can find out more about gradients from here and here.
Multiple Background Images
You can use multiple images or a mixture of images and gradients for your background to create cool effects. For example:
<section> <div> ... </div> <div style="background-image: url(logo.png), url(background-pattern.png)"></div> </section>
You can look at this example to see this technique at play.