How to set a background?

The background is usually a simple image, which will be resized to fit any screen responsively. The markup for the background image, as you’ve already seen in the Getting Started section, is the following:

<!-- Slidea -->
<div class="slidea">
  <!-- Slide -->
  <div class="slidea-slide">
    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-1.jpg">
  </div>
</div>

For preloading purposes, we can use the data-slidea-src attribute instead of src to hide the background until it is fully loaded.

<!-- Background -->
<!-- To change the background, modify the src=".." attribute -->
<img class="slidea-background" data-slidea-src="assets/img/slide-1.jpg">

Are there any data-attribute settings?

In order to target the background’s data-settings, we will add them to the <div class="slidea-slide"> instead. Slide settings that can be set are the following:

<!-- Slidea -->
<div class="slidea">
  <!-- Slide -->
  <div class="slidea-slide" data-slidea="fadeIn" data-slidea-out="fadeOut" data-slidea-duration="5000">
    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-1.jpg">
  </div>
</div>

Basically, you will be able to use any animation data-attribute for a background.