What are layers?

Layers are elements which keep the same size ratio as the canvas. The size and placement is computed based on the Canvas size.

The canvas

The canvas is your workspace, and its size is determined by the background image real width and height. Therefore layers require their position to be set explicitly on the canvas. If the layer is not an image, it also requires an explicit width and height.

Whenever the browser window gets resized, the layers will resize. They work in a way similar to Photoshop layers, meaning they follow a bottom to top approach: layers will be placed above one another using a z-index, in the order they appear in.

How are layers marked up?

As we’ve seen already, layers are placed directly inside the canvas, right above the background:

<!-- Imagine -->
<div class="imagine" style="height: 400px;" id="imagine-adding-image-layers">
  <!-- Your content here -->

  <!-- Layer -->
  <!-- To change the layer image, modify the src=".." attribute -->
  <img class="imagine-layer" src="../../img/layer-1.png"
       data-imagine-bottom="0" data-imagine-left="0" data-imagine="x 0.5">

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

What kind of layers are there?

imagine supports both image and non-image layers. HTML layers can contain any HTML markup.

Image Layers

<!-- Layer -->
<img class="imagine-layer" src="assets/img/layer.png" alt="Imagine Layer"/>

HTML Layers

<!-- Layer -->
<div class="imagine-layer">
  <!-- Layer HTML Content -->
</div>

Setting layer size

Layers size is calculated based on the canvas size, but can also be set explicitly using the following data-attributes.

• data-imagine-width
• data-imagine-height

Image Layers

<!-- Layer -->
<img class="imagine-layer" src="assets/img/layer-1.png"
   data-imagine-width="600" data-imagine-height="200">

HTML Layers

<!-- Layer -->
<div class="imagine-layer"
   data-imagine-width="600" data-imagine-height="200">
  <!-- Layer HTML Content -->
</div>

Setting layer position

Layers can be positioned relative to the canvas using any pair of the 4 non-opposing positions.

• data-imagine-top
• data-imagine-bottom
• data-imagine-left
• data-imagine-right

Image Layers

<!-- Layer -->
<img class="imagine-layer" src="assets/img/layer-1.png"
   data-imagine-top="100" data-imagine-left="100">

HTML Layers

<!-- Layer -->
<div class="imagine-layer"
   data-imagine-bottom="100" data-imagine-right="100">
  <!-- Layer HTML Content -->
</div>