Scroll with patterned background

In Internet Explorer it is possible to set the scroll colors using CSS. I have been asked if it is possible to set a background pattern for the track part of the scroll. This is my solution. I have written a lot of comments in the code so it should be easy for you to change to the colors and backgrounds you would like to use. Note that this only works in Internet Explorer! The scroll will be unchanged in other browsers. If you have problem just email me. Get the code here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Katarina Wästlund">

<!-- This code is written by Katarina Wästlund, http://kattisdesign.wastlund.se, and can be used for pages for personal use as long as this comment stays intact. If you use this code for making linkware you must link to my page: http://kattisdesign.wastlund.se -->
<title>Mönstrad bläddringslist / Scroll with patterned background</title>

<style type="text/css">
<!--
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {

/*sätt färgerna på din scrollbar, fungerar endast i IE*/
/*Add the colours for your scrollbar, works only in IE*/

scrollbar-face-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color : #FFFFFF;
scrollbar-darkshadow-color : #000000;
scrollbar-base-color : #000000;

/*Sätt en färg på din track som inte används någon annanstans på sidan.
Denna färg kommer att bli genomskinlig*/
/*Add a color for your track. This colour should not be used anywhere else on the page,
since it will become transparent.*/

scrollbar-track-color : #FF0000;

/*Här sätter du den bakgrund som kommer att lysa igenom.*/
/*Here is the background that will shine through.*/

background : url("http://kattisdesign.wastlund.se/grafik/textures/greenglass.jpg");

/*Ange en bakgrundsfärg i samma färgnyans som bakgrunden medan sidan laddas*/
/*Add a background color in the same colour as the background while the page is loading*/

background-color: #B3CFB3;

overflow : auto;
}

.contentbox {

width: 100%;
height: 100%;
overflow: auto;

/*Här sätter vi vilken färg som ska bli transparent*/
/*Here is the color that will be transparent*/
filter: chroma(color=#FF0000);

/*Ange en bakgrundsfärg i samma färgnyans som bakgrunden på sidan medan sidan laddas*/
/*Add a background color in the same colour as the main background while the page is loading*/

background-color: #f4c6dc;

/*Bakgrunden på sidan*/
/*The main background on the page*/

background: url("http://kattisdesign.wastlund.se/grafik/textures/pinkmarmor.gif");

}
-->
</style>

</head>

<body>

<div class="contentbox" allowtranparency="true">

<p>Lägg till din text här...<br>
Add your text here...</p>

</div>

</body>

</html>
© Kattis 2004