How to add a layer in HTML?

We can add a layer to an HTML document using the <layer> tag in HTML. Once we have created a layer using this tag, then we can manipulate it using JavaScript. This tag is used to position and animate (through scripting) elements in a page. A layer can be thought of as a separate document that resides on top of the main one, all-existing within one window.Following is the usage of <layer> tag in HTML -

<LAYER SRC="frame.gif" ABOVE="bg" NAME="frame" WIDTH=200 HEIGHT=200>

Attributes of the <layer> tag

Above − The above attribute in layer tag specifies the name of above layer when compared to current layer. Following is the usage of above tag in <layer>

<LAYER SRC="tree.gif" ABOVE="flower" NAME="Tree">

Background − The background attribute specifies the absolute or relative location of image that the browser tiles as background of layer. Following is the usage of background in layer tag -

<LAYER Z-INDEX=5 NAME="info" BACKGROUND="logo.gif">
   <h1>Hi there</h1>

Below − The below attribute used to specify the name of layer below the current layer. Following is the usage of below in layer tag -

<LAYER BACKGROUND="floor.jpg" NAME="floor" UNDER="Car"></LAYER>

bgcolor − The bgcolor attribute specifies the background color of layer. It uses either the hexadecimal values of RGB or color names. Following is the usage of bgcolor in layer tag.

<layer bgcolor=#ff0011> 
   <div align=center> 
      <h1><blink>eat at joes!</blink></h1>

clip − The clip attribute indicates the dimensions of a clipping rectangle which specifies the visible areas of layer. Areas that are present outside the rectangle becomes transparent. Following is the syntax of clip attribute in layer tag

<layer src="pic.jpg" clip="40%,40%"></layer>

Height − The height attribute specifies the vertical dimension of layer. Following is the usage of height attribute in layer tag.

<layer src="car.gif" above="bg" name="car" width=200 height=200></layer>

left − The left attribute specifies the horizontal position relative to left edge of parent layer. for vertical positioning we use top. Following is the usage of left attribute in layer tag.

<layer left=100 top=150> this layer is at {100,150}</layer>

name − The name attribute is used to give the name to layer which differentiates from other codes. Following is the usage of this attribute.

<layer src="car.gif" name="carpic" above="road"></layer>

src − The src attribute specifies the relative or absolute location of image file or file with contents of layer. Following is the usage of src attribute in layer tag.

<layer src="logo.jpg"></layer>

top − The top attribute specifies layers’ vertical position relative to top edge of parent layer.

<layer left=100 top=150>this layer is at {100,150}</layer>

visibility − The visibility layer specifies whether the layer is initially visible or not?

  • visibility=show // layer is initially visible

  • visibility=hide // layer is not initially visible.


Z-index − The z-index is used to specify whether the layer appears in stack layer or not. The <layer> is browser specific element which leads to confusion. To create layer effect we can use the z-index property of <div> tag.

<LAYER Z-INDEX=0 NAME="Bottom">You will not this text if other layers are above it.</LAYER>


In the following example we are trying to add a layer to an HTML document using the <layer> tag −

<!DOCTYPE html>
   <title>HTML layer Tag</title>
   <layer id="layer1" top="250" left="50" width="200" height="200" bgcolor="red">
      <p>layer 1</p>
   <layer id="layer2" top="350" left="150" width="200" height="200" bgcolor="blue">
      <p>layer 2</p>
   <layer id="layer3" top="450" left="250" width="200" height="200" bgcolor="green">
      <p>layer 3</p>

Updated on: 10-Oct-2023

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started