Requirements: HTML editor

Transparent scrollbars do not cover the image as much as regular scrollbars.

You can use transparent scrollbars for iframes or scrolling div layers. For iframes, make sure you insert a background image for the table cell containing the iframe. You do not need to do that for scrolling div layers.

After you code the scrollbar colors, insert this code in the iframe or div layer tags. Replace transparent color with the color that will be transparent:

Iframes:

style="filter: chroma(color=#transparent color)"

Div layers:

allowtransparency="true" style="filter: chroma(color=#transparent color)"

Allowtransparency="true" allows the background of your page to be transparent. The chroma property makes the specified color transparent for the entire page. This means that if you select black, you cannot use black text.

It should look something like this:

Iframes:

<iframe name="main" src="frame source" width=### height=### frameborder="0" style="filter: chroma(color=#transparent color)"></iframe>

If you use the filter many times, you can insert the code in your CSS stylesheet and use the assigned class in the HTML.

.transparent
{
allowtransparency: true;
filter: chroma(color=#transparent color);
}

Iframes:

<iframe name="main" src="frame source" width=### height=### frameborder="0" class="transparent"></iframe>

Here is an example. The scrollbar in the iframe is transparent.

You can create different effects with transparent scrollbars. Just make sure that part of the scrollbar is still visible for the visitors to scroll easily.