How to Insert an Image in HTML?

How to Move Image in HTML?

Last Updated : 10 Oct, 2024

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:

How to Insert an Image in HTML?

aksrathod07

Improve

Article Tags :

Similar Reads

How to Rotate Image in HTML?

Rotating and scaling images in HTML can enhance the visual presentation of your web content. By using CSS properties like transform, you can easily change the orientation and size of images. This will help you understand the process of rotating images using the rotate() function and scaling images w

How to use SVG Images in HTML?

SVG images are special graphics used in HTML that doesnâ€™t lose quality when resized. They are great for icons, logos, and shapes because they stay clear at any size. To use SVG images in HTML, add them with <img src=" image.svg"> or paste SVG code directly with <SVG>.1. Using SVG Image w

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method

How to Add Image in HTML Table ?

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a

How to Resize an Image in HTML?

Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint

How to Work with Images in HTML?

Adding images to your web pages is crucial for enhancing visual appeal and user engagement. In HTML, there are different methods to embed images, and this guide will cover two common approaches with syntax and examples.These are the following ways to Work with Images in HTML:Table of ContentAdding S

How to align Image in HTML?

Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layou

How To Change Image Size In HTML?

To change the size of an image in HTML, you can use width and height attribute within <img> tag. Alternatively, we can use CSS properties to set or change the image size. Change image size feature is useful while developing a responsive web page.Table of ContentUsing HTML width and height Attr

How to Create Image Maps in HTML?

Image maps in HTML5 allow you to make certain areas of an image clickable, leading users to different links or triggering specific actions. The clickable areas (also known as hotspots) are defined using the <area> tag, while the <map> tag is used to specify the map itself.What Is an Imag

How to render HTML to an image ?

Converting HTML code into an image can be achieved through various methods, such as using the html2canvas JavaScript library or leveraging CSS. This capability is particularly useful for users who wish to share a visual representation of their code without sharing the actual code. This guide will de