HTML Bouncing Image

This page contains HTML code for creating bouncing images.

You can create a bouncing image in HTML using <marquee> tags. You can make your image bounce sideways or up and down. You can use any image - photos, animated gifs, icons, etc.

Note: The <marquee> tag is non-standard HTML (it's not part of the official HTML specifications). Therefore, it's recommended that you use a CSS Bouncing Image instead.

Side to Side

To make your image bounce back and forth, use behavior="alternate". Here's an example:

Source Code	Result
<marquee behavior="alternate"> <img src="//www.html.am/images/html-codes/marquees/coffee.gif" width="150" height="108" alt="Cup of coffee on saucer"> </marquee>

Note that browser support for bouncing marquees is quite limited.

Up & Down

You can make your image bounce up and down too. To do this, just add behavior="alternate" direction="up". Example:

Source Code	Result
<marquee behavior="alternate" direction="up"> <img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"> </marquee>

Changing the Speed

You can speed up your bouncing image - or slow it down if you prefer. To do this, add the scrollamount attribute. For example, scrollamount="1" results in a very slow bounce, while scrollamount="50" will be very fast.

Some examples:

Source Code	Result
<marquee behavior="alternate" scrollamount="40"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></marquee> <marquee behavior="alternate" scrollamount="15"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></marquee> <marquee behavior="alternate" scrollamount="60"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></marquee> <marquee behavior="alternate" scrollamount="30"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></marquee>

Source Code

Result

<marquee behavior="alternate" scrollamount="40"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></marquee>
<marquee behavior="alternate" scrollamount="15"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></marquee>
<marquee behavior="alternate" scrollamount="60"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></marquee>
<marquee behavior="alternate" scrollamount="30"><img src="//www.html.am/images/html-codes/marquees/bee.gif" width="72" height="79" alt="Buzzy bee"></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 :)