Scroll Picture Box

This page contains HTML scroll picture box code. Feel free to copy and paste the scroll picture box color code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

The examples on this page demonstrate how to place pictures into a scroll box. If you found this page while trying to find code for scrolling pictures, check out how to create scrolling images.

Scroll Picture Box Code

This example creates a picture box that scrolls when the pictures don't fit into the box properly. The pictures are added using the HTML img tag.

Source CodeResult
Cartoon creature
Cartoon vulture

Background Picture

This example adds a background picture to a scroll box. This is done using the CSS background-image property.

Source CodeResult

Background Picture Box

Here's a demonstration of how to add a background image to a scroll box. We use the CSS 'background-image' property to do this.

Background Picture - No Repeat

In the above example, the background picture repeated across the scroll box. That is, the scroll box was bigger than the picture. Therefore, the picture simply repeated itself across the box so that it took up the whole scroll box.

In this example however, we will tell the background image not to repeat across the scroll box. We will do this using the shorthand background property.

Source CodeResult

The background image on this scroll box doesn't repeat across the box. Instead, it just renders once, then let's us do our thing.