Using css, you can make the scrollbar within a div layer or iframe transparent, so the background image will show through. If you already know how to make a colored scrollbar, then this tutorial should be a breeze!
STEP 1:
The first step is to create a colored scrollbar, which is shown in the following code:
scrollbar-track-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
The above scrollbar would be all black with a white arrow. You can custoize the colors however you like.
STEP 2:
Now you need to create the chroma filter code.
In this example the color is #000000, so everything black will become transparent. The result will be a transparent scrollbar with white arrows
STEP 3:
Now you need to apply the filter to the iframe or div layer, using one of the following codes, depending on your layout (without the first space, of course):
< iframe src="site.html" style="filter: chroma(color=#000000);">
Keep in mind you still need to include the other attributes, as they have been excluded from the code. Also remember that each page must have the scrollbar code somewhere, either in an embedded or external styles sheet. In the iframe example, site.html must also have the code.
There, now you have a transparent scrollbar! Keep in mind though, this effect only works on PC computers, and won't work in all browsers.