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 it’s code.
<!-- Slide 1 (#20) -->
<section class="slide fade-6 kenBurns">
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-8-12">
<h1 class="margin-bottom-2 ae-1">Heart of the image</h1>
<p class="larger light ae-2"><span class="opacity-8">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 class="button blue rounded cropBottom ae-5 fromCenter">Get Started for Free</a>
</div>
</div>
</div>
</div>
<div class="background" 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 class="slide fade-6 kenBurns">
...
<div class="background" 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 class="slide whiteSlide">
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-8-12">
<h1 class="margin-bottom-2 ae-1">Maui Hotel Or Maui Condo</h1>
<p class="largest light margin-bottom-3 ae-2"><span class="opacity-8">One of the best ways to make a great vacation quickly horrible is to choose the wrong accommodations for your trip.</span></p>
<div class="fix-5-12">
<a class="button rounded blue ae-3 margin-right-1 wideForPhablet">Get Started</a>
<div class="button rounded white popupTrigger ae-4 wideForPhablet" data-popup-id="21-2"><i class="material-icons text-blue">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 class="slide whiteSlide">
<div class="content">
...
</div>
<div class="background" 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 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 class="slide">
<div class="content">
...
</div>
<div class="background" 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 class="slide fade-6 kenBurns">
<div class="content">
...
</div>
<div class="background" 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 class="slide whiteSlide deepPurple">
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-8-12">
<h1 class="margin-bottom-2 ae-1">Heart of the image</h1>
<p class="larger light ae-2"><span class="opacity-8">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 class="button blue rounded cropBottom ae-5 fromCenter">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 class="slide deepPurple">
...
</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 class="slide">
<div class="content">
...
</div>
<div class="background" 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 class="slide">
<div class="content">
...
</div>
<div class="background" style="background: linear-gradient(#2F1893, #ffffff)"></div>
</section>
Here’s the result of that:
You can provide a direction for the gradient:
<section class="slide">
<div class="content">
...
</div>
<div class="background" style="background: linear-gradient(to top, #2F1893, #ffffff)"></div>
</section>
Now it starts from bottom to top.
Below, we use a radial gradient:
<section class="slide">
<div class="content">
...
</div>
<div class="background" 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 on 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 class="slide">
<div class="content">
...
</div>
<div class="background" style="background-image: url(logo.png), url(background-pattern.png)"></div>
</section>
You can look at this example to see this technique at play.