How to Move Image in HTML?

Last Updated : 23 Jul, 2025

The <marquee> tag in HTML allows you to create scrolling effects for images, making it a simple way to add dynamic movement to your webpage. Images can scroll horizontally or vertically, with various attributes controlling the direction and behavior of the movement.

Syntax

<marquee>
   <img src="image.jpg" alt="Scrolling Image">
</marquee>

Attributes of <marquee> Tag

The <marquee> tag supports several attributes that define the scrolling behavior:

Attributes

Description

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, etc.

Example 1: Scrolling Images Using the <marquee> Tag

In this example, we will use the <marquee> tag to move images. The first image will scroll from right to left, while the second image will scroll vertically upwards.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        Move Image in HTML
    </title>
</head>

<body>
    <center>
        <!-- The image has scrolling behavior to left -->
        <marquee behavior="scroll" direction="left">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                alt="GeeksforGeeks logo">
        </marquee>

        <!-- The image has scrolling behavior to the upper direction. -->
        <marquee behavior="scroll" direction="up">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                alt="GeeksforGeeks logo">
        </marquee>
    </center>
</body>

</html>

Output:

Example 2: Moving Images Back and Forth Using the behavior Attribute

Here, we will demonstrate how to use the behavior="alternate" attribute to make the images move back and forth within the <marquee> container.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        Moving Image in HTML
    </title>
</head>

<body>

    <center>
        <marquee behavior="alternate" direction="left">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                alt="GeeksforGeeks logo">
        </marquee>

        <marquee behavior="alternate" direction="right">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                alt="GeeksforGeeks logo">
        </marquee>
    </center>

</body>

</html>

Output:

Comment

Explore