HTML Scrolling Image

This page contains examples of scrolling images that were created using the <marquee> tag. For a standards-compliant version, see CSS Scrolling Image instead.

The HTML method of creating a scrolling image is to place an <img> element inside a <marquee> element. Although the <marquee> element is not part of the official HTML specification, it is widely supported by most major browsers.

Right to Left

To make your image scroll left (i.e. from right to left), use behavior="scroll" and direction="left". Here's an example:

Source Code	Result
<marquee behavior="scroll" direction="left"> <img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /> </marquee>

Left to Right

To make your image scroll right (i.e. from left to right), use behavior="scroll" and direction="right". Example:

Source Code	Result
<marquee behavior="scroll" direction="right"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" width="50" height="38" alt="Spinning arrow" /> </marquee>

Scroll Up

To make your image scroll up (i.e. from bottom to top), use behavior="scroll" and direction="up". Example:

Source Code	Result
<marquee behavior="scroll" direction="up"> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" width="32" height="32" alt="Arrow pointing up" /> </marquee>

Scroll Down

To make your image scroll down (i.e. from top to bottom), use behavior="scroll" and direction="down". Like this:

Source Code	Result
<marquee behavior="scroll" direction="down"> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" width="32" height="32" alt="Arrow pointing down" /> </marquee>

Speed

You can change the scrolling speed of your marquee. For example, scrollamount="1" sets the marquee to a very slow scroll, while scrollamount="20" will make it faster. You can use whatever number you like though. Like this:

Source Code	Result
<marquee behavior="scroll" direction="left" scrollamount="25"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> <marquee behavior="scroll" direction="left" scrollamount="1"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> <marquee behavior="scroll" direction="left" scrollamount="50"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> <marquee behavior="scroll" direction="left" scrollamount="15"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>

Source Code

Result

<marquee behavior="scroll" direction="left" scrollamount="25"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>
<marquee behavior="scroll" direction="left" scrollamount="1"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>
<marquee behavior="scroll" direction="left" scrollamount="50"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>
<marquee behavior="scroll" direction="left" scrollamount="15"><img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>

More Marquee Codes

You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:

Marquee Generator

Also check out the Marquee Generator.

Marquee Usability

Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)