HTML Marquee: Scrolling Text, Rolling Images

By Xah Lee. Date: . Last updated: .

“Marquee element” is invented by Microsoft back around 1999. It is used to make text or images to automatically scroll. Typically, in a horizontal strip.

HTML Marquee

The BOSS IS ON A ROLL (behavior=scroll)
The BOSS IS ON A ROLL (behavior=slide)
The BOSS IS ON A ROLL (behavior=alternate)

Here's the code:

<marquee bgcolor="#ffff00" width="600" height="50">The BOSS IS ON A ROLL</marquee>

“marquee” element's attributes:

HTML Marquee Attributes
syntaxmeaning
loop="-1"a integer. Number of times to loop. “-1” means forever. Default value is “-1”
direction="left"left, right, up, down. Default is left
behavior="scroll"scroll, slide, alternate. Default is scroll
scrolldelay="85" update interval for scroll movement, in milliseconds. Default is 85. Smaller than 60 is ignored, 60 is used instead, unless truespeed is specified.
truespeedsee: scrolldelay. This is not well supported.
scrollamount="6"amount of scrolling update, in pixels.
hspace="30"horizontal margin
vspace="10"vertical margin
width="600"width in CSS pixel. [see What's a CSS Pixel?]
height="40"width in CSS pixel.
bgcolorCSS color value. [see CSS Color Syntax]

The “marquee” element is supported by all browsers.

CSS3 Marquee

“marquee” is re-introduced in CSS3.

As of , major browsers do not support it.

Here's a example. (if you don't see it move, then your browser doesn't support it.)

The BOSS IS ON A ROLL
<div id="marquee99609">The BOSS IS ON A ROLL</div>
#marquee99609 {
background-color:yellow;
width:9em;
height:2em;
overflow: auto;
overflow-style: marquee-line;
marquee-style: scroll;
}

You can emulate marquee using CSS animation. [see CSS: Animation]

See also: CSS: OverFlow, Scrollbar

Reference

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc