Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Move Image in HTML ?

  • Difficulty Level : Medium
  • Last Updated : 24 Jun, 2021

You can easily move images in HTML using <marquee> tag. It is used to create scrolling images either from horizontally left to right or right to left, or vertically top to bottom or bottom to top. By default, image found within the <marquee> tag will scroll from right to left.

Syntax:

<marquee>
   <img src="">
</marquee>

Attributes of <marquee> tag:

  • direction: Sets the direction for the scrolling images. The value of this attribute can be left, right, up or down.
  • behavior: The behavior tells about how the text scrolls. It can be one of the following values which are alternate, scroll, slide.

Example 1: The following example uses scroll behavior.

HTML




<!DOCTYPE html>
<html>
  
<body>
<center>
    <!-- The image has scrolling behavior to left -->
    <marquee  behavior="scroll" direction="left">        
          <img src=
          alt="GeeksforGeeks logo"
    </marquee>  
      
   <!-- The image has scrolling behavior to the upper direction. -->
   <marquee  behavior="scroll" direction="up">         
          <img src
          alt="GeeksforGeeks logo"
    </marquee>  
</center>
</body>
</html>

 

Output:

Example 2: The following example uses the alternate behaviour.

HTML




<!DOCTYPE html>
<html>
<body>
  
<center>
    <marquee  behavior="alternate" direction="left">          
          <img src=
          alt="GeeksforGeeks logo"
    </marquee>  
      
   <marquee  behavior="alternate" direction="right">         
          <img src
          alt="GeeksforGeeks logo"
    </marquee>  
</center>
  
</body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!