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:

<!-- Imagine -->
<div class="imagine">
  <!-- Your content here -->

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

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

<img class="imagine-background" data-imagine-src="assets/img/background-1.jpg">

Adding animation

To set the animation of your imagine background you have 3 alternatives:

1. Using the data-imagine attribute

This option allows you to write the animations directly in your HTML using the data-imagine attribute.

<img class="imagine-background" src="assets/img/background-1.jpg" data-imagine="y 0.5">

2. Using the animation settings

This is a more general approach, setting the default animation option.

$('.imagine').imagine({
  animation: "y 0.5"
});

3. Using the background animation settings

This option is useful when designing a layered background to separate component animations.

$('.imagine').imagine({
  animation: {
    background: "y 0.5"
  }
});